Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexrintt/lofi-player
Web lofi-player built to learn HTML, CSS and JavaScript.
https://github.com/alexrintt/lofi-player
ar-cat-website ar-state-browseable css3 html5 javascript lofi music peace player scss
Last synced: about 1 month ago
JSON representation
Web lofi-player built to learn HTML, CSS and JavaScript.
- Host: GitHub
- URL: https://github.com/alexrintt/lofi-player
- Owner: alexrintt
- License: mit
- Created: 2020-04-17T01:25:57.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-29T20:32:04.000Z (about 2 years ago)
- Last Synced: 2024-11-08T09:43:12.079Z (about 1 month ago)
- Topics: ar-cat-website, ar-state-browseable, css3, html5, javascript, lofi, music, peace, player, scss
- Language: JavaScript
- Homepage: https://alexrintt.github.io/lofi-player
- Size: 77.2 MB
- Stars: 99
- Watchers: 4
- Forks: 19
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- starred - alexrintt/lofi-player - Web lofi-player built to learn HTML, CSS and JavaScript. (JavaScript)
README
⭐⭐⭐⭐⭐
Lofi Player
A minimal music Lofi-Player with Youtube Data v3 API, Iframe API and a loot of JavaScript
# Live On
Enjoy [clicking here](https://alexrintt.github.io/lofi-player/)
### Support
If 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).
### What is it?
Its 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.
### How to clone project
> _Note, dont forget to create a .env file with your Google API Credentials
> in [Google Developers Console](https://console.developers.google.com/apis/dashboard) and active the Youtube Data API v3 in API Libraries._
#### Clone this repo
```
git clone https://github.com/alexrintt/lofi-player.git
```
#### Change path
```
cd lofi-player
```
#### Install dependencies
```
yarn install
npm install
```
#### Run development server
```
yarn dev
npm run dev
```
#### Create static files
```
yarn pre-build
npm run pre-build
```
#### Deploy to github pages
Just push everything to a repository of yours. `.github` folder contains an action will automatically build and publish to the GitHub pages.
Remeber to set `GOOGLE_API_KEY` in your repository Settings > Secrets > Actions > New repository secret and set with the value your previous generated on the first step (Generate Google Developer Console credentials).
## 8BitDash
All 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/).
## Creators
Open Source
Copyright © 2020-present, Alex Rintt.
Lofi Player is MIT licensed 💖
