Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/son-link/jukeboxjs
Web Component to add an audio player to your website
https://github.com/son-link/jukeboxjs
audio-player javascript music music-player web-components
Last synced: about 2 months ago
JSON representation
Web Component to add an audio player to your website
- Host: GitHub
- URL: https://github.com/son-link/jukeboxjs
- Owner: son-link
- License: mit
- Created: 2023-10-24T17:19:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-25T22:12:03.000Z (about 1 year ago)
- Last Synced: 2023-10-26T18:42:57.137Z (about 1 year ago)
- Topics: audio-player, javascript, music, music-player, web-components
- Language: JavaScript
- Homepage: https://son-link.github.io/jukeboxjs/
- Size: 19.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JukeboxJS
Web Component to add an audio player to your website in a very easy way, programmed using only web standards, without any external dependencies.
You can view some examples [here](https://son-link.github.io/jukeboxjs)
Source code under the MIT license
## Install:
### From source
You just need to clone this repository or click on Code -> Download zip and copy the jubeboxjs.js file and the assets folder where you need it.
Once done you must import the script using the <script> tag.
```html
```
### CDN
You can also use the CDN, which also has the icons embedded. It's heavier, but you don't need to copy the assets folder, plus you'll always have it up to date.
You can also download it and use it directly on your website.
```html
```
### Using tag
To embed the player on your website you must use the following tag:
```html
```
## Tag parameters
* **src**: The URL to an audio file.
* **playlist**: The URL to a playlist. This can be a simple text file with one address per line, or using the M3U format (recommended if you want to display artist and title).
* **color-text**: The color of the text
* **color-bg**: the color of the background and text of the current track in the playlist
* **color-btn**: the color of the buttons, the thumb of the range and the background of the current track in the playlist
color-playlist: The background color of the playlist
* **color-range**: The color, or colors, of the volume and position ranges. These are 2 colors separated by a comma (start and end color of the gradient), or a single color.
**Note**: Colors can be in hexadecimal (#rrggbb), RGB (e.g. rgb(255, 0, 150)) or RGBA (e.g. rgba(255, 0, 150, 0.5)) format.
## Extra credits
The music uploaded here has been downloaded from https://audionautix.com, created by Jason Shaw and licensed under the [Creative Commons Attribution 4.0 International License](https://audionautix.com/creative-commons-music).
Syntactic highlighting in the examples thanks to [Prism](https://prismjs.com/index.html)