{"id":24847231,"url":"https://github.com/alexcmgit/lofi-player","last_synced_at":"2025-09-12T02:18:19.046Z","repository":{"id":45976122,"uuid":"256369894","full_name":"alexcmgit/lofi-player","owner":"alexcmgit","description":"Web lofi-player built to learn HTML, CSS and JavaScript.","archived":false,"fork":false,"pushed_at":"2022-11-29T20:32:04.000Z","size":80995,"stargazers_count":98,"open_issues_count":1,"forks_count":21,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-09-07T00:42:21.107Z","etag":null,"topics":["ar-cat-website","ar-state-browseable","css3","html5","javascript","lofi","music","peace","player","scss"],"latest_commit_sha":null,"homepage":"https://alexcmgit.github.io/lofi-player/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexcmgit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-17T01:25:57.000Z","updated_at":"2025-06-07T22:41:53.000Z","dependencies_parsed_at":"2023-01-23T11:15:29.159Z","dependency_job_id":null,"html_url":"https://github.com/alexcmgit/lofi-player","commit_stats":null,"previous_names":["alexcmgit/lofi-player"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alexcmgit/lofi-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcmgit%2Flofi-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcmgit%2Flofi-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcmgit%2Flofi-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcmgit%2Flofi-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexcmgit","download_url":"https://codeload.github.com/alexcmgit/lofi-player/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexcmgit%2Flofi-player/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274743244,"owners_count":25341134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-12T02:00:09.324Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ar-cat-website","ar-state-browseable","css3","html5","javascript","lofi","music","peace","player","scss"],"created_at":"2025-01-31T11:02:47.235Z","updated_at":"2025-09-12T02:18:19.017Z","avatar_url":"https://github.com/alexcmgit.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/public/favicon.png\" width=\"150\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e⭐⭐⭐⭐⭐\u003c/p\u003e\n\u003ch1 align=\"center\"\u003eLofi Player\u003c/h1\u003e\n\u003cp align=\"center\"\u003eA minimal music Lofi-Player with Youtube Data v3 API, Iframe API and a loot of JavaScript\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg  src=\"https://img.shields.io/badge/application-music_player-blue\" alt=\"Application Type\" /\u003e\n  \u003cimg  src=\"https://img.shields.io/badge/language-javascript-yellow\" alt=\"Repo Main Language\" /\u003e\n  \u003cimg  src=\"https://img.shields.io/badge/bundler-parcel-blueviolet\" alt=\"Module Bundler\" /\u003e\n  \u003cimg  src=\"https://img.shields.io/badge/api-youtube_iframe_google-success\" alt=\"Repo API\" /\u003e\n  \u003cimg  src=\"https://img.shields.io/badge/type-project-green\" alt=\"Repo Type\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.instagram.com/manno_eu/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/url?label=Follow%20%40Emmanuel\u0026logo=instagram\u0026url=https%3A%2F%2Fwww.instagram.com%2Fmanno_eu%2F\" alt=\"Follow\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.linkedin.com/in/emmanuel-messias-535621127/\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/twitter/url?label=Connect%20%40Emmanuel\u0026logo=linkedin\u0026url=https%3A%2F%2Fwww.twitter.com%2Falexrintt%2F\" alt=\"Follow\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./docs/lofi-player.gif\" width=\"350\"\u003e\n\u003c/p\u003e\n\n\u003cp\u003e\n  \u003cimg src=\"./docs/pt-br.png\" alt=\"Portuguese\" height=\"16\"\u003e\n  \u003ca href=\"https://github.com/alexrintt/lofi-player/blob/master/README-ptbr.md\"\u003eLer em português\u003c/a\u003e\n\u003c/p\u003e\n\n# Live On\n\nEnjoy [clicking here](https://alexrintt.github.io/lofi-player/)\n\n### Support\n\nIf you have ideas to share, bugs to report or need support, you can either open an issue or join our [Discord server](https://discord.gg/86GDERXZNS).\n\n### What is it?\n\nIts a simple and minimalist Player with Lofi music style, builded with HTML, CSS and JavaScript, using Youtube Data API v3 for fetch Playlist videos count, Youtube Iframe API to render music as background. Parcel is a choosed Module Bundler because it's simple, perfect for this project.\n\n### How to clone project\n\n\u003e _Note, dont forget to create a .env file with your Google API Credentials\n\u003e in [Google Developers Console](https://console.developers.google.com/apis/dashboard) and active the Youtube Data API v3 in API Libraries._\n\n#### Clone this repo\n\n```\ngit clone https://github.com/alexrintt/lofi-player.git\n```\n\n#### Change path\n\n```\ncd lofi-player\n```\n\n#### Install dependencies\n\n```\nyarn install\nnpm install\n```\n\n#### Run development server\n\n```\nyarn dev\nnpm run dev\n```\n\n#### Create static files\n\n```\nyarn pre-build\nnpm run pre-build\n```\n\n#### Deploy to github pages\n\nJust push everything to a repository of yours. `.github` folder contains an action will automatically build and publish to the GitHub pages.\n\nRemeber to set `GOOGLE_API_KEY` in your repository \u003ckbd\u003eSettings\u003c/kbd\u003e \u003e \u003ckbd\u003eSecrets\u003c/kbd\u003e \u003e \u003ckbd\u003eActions\u003c/kbd\u003e \u003e \u003ckbd\u003eNew repository secret\u003c/kbd\u003e and set with the value your previous generated on the first step (Generate Google Developer Console credentials).\n\n## 8BitDash\n\nAll these amazing gifs and images that are used as a background are from [this project](http://www.8bitdash.com/) and [its repository](https://github.com/andumorie/8bitdash.github.io/) and they have a store in which sell [these gifs](https://8bitdash.threadless.com/).\n\n## Creators\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/mannoeu\"\u003e\n        \u003cimg src=\"https://avatars0.githubusercontent.com/u/53797821?s=460\u0026v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\n       \u003csub\u003e\u003cb\u003eEmmanuel\u003c/b\u003e\u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ca href=\"https://github.com/alexrintt\"\u003e\n        \u003cimg src=\"https://avatars2.githubusercontent.com/u/51419598?s=400\u0026v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\n       \u003csub\u003e\u003cb\u003eAlex Rintt\u003c/b\u003e\u003c/sub\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n \u003c/table\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\u003csamp\u003e\n\n\u003ch2 align=\"center\"\u003e\n  Open Source\n\u003c/h2\u003e\n\u003cp align=\"center\"\u003e\n  \u003csub\u003eCopyright © 2020-present, Alex Rintt.\u003c/sub\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eLofi Player \u003ca href=\"https://github.com/alexrintt/lofi-player/blob/master/LICENSE.md\"\u003eis MIT licensed 💖\u003c/a\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"/public/favicon.png\" width=\"35\" /\u003e\n\u003c/p\u003e\n  \n\u003c/samp\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexcmgit%2Flofi-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexcmgit%2Flofi-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexcmgit%2Flofi-player/lists"}