{"id":19984232,"url":"https://github.com/son-link/jukeboxjs","last_synced_at":"2026-05-12T11:31:26.762Z","repository":{"id":203363793,"uuid":"709418819","full_name":"son-link/jukeboxjs","owner":"son-link","description":"Web Component to add an audio player to your website","archived":false,"fork":false,"pushed_at":"2023-10-25T22:12:03.000Z","size":20858,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-12T11:19:26.072Z","etag":null,"topics":["audio-player","javascript","music","music-player","web-components"],"latest_commit_sha":null,"homepage":"https://son-link.github.io/jukeboxjs/","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/son-link.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-24T17:19:29.000Z","updated_at":"2024-12-13T20:24:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"1a40024d-72b4-4949-b82c-f7f56b7ab9f0","html_url":"https://github.com/son-link/jukeboxjs","commit_stats":null,"previous_names":["son-link/jukeboxjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/son-link%2Fjukeboxjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/son-link%2Fjukeboxjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/son-link%2Fjukeboxjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/son-link%2Fjukeboxjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/son-link","download_url":"https://codeload.github.com/son-link/jukeboxjs/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241418357,"owners_count":19959736,"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","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":["audio-player","javascript","music","music-player","web-components"],"created_at":"2024-11-13T04:18:00.636Z","updated_at":"2026-05-12T11:31:21.728Z","avatar_url":"https://github.com/son-link.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JukeboxJS\n\n![JukeboxJS screenshot](screenshot.png)\n\nWeb Component to add an audio player to your website in a very easy way, programmed using only web standards, without any external dependencies.\n\nYou can view some examples [here](https://son-link.github.io/jukeboxjs)\n\nSource code under the MIT license\n\n## Install:\n\n### From source\nYou just need to clone this repository or click on Code -\u003e Download zip and copy the jubeboxjs.js file and the assets folder where you need it.\n\nOnce done you must import the script using the \u0026lt;script\u003e tag.\n```html\n\u003cscript src=\"jukebox.js\" defer\u003e\u003c/script\u003e\n```\n\n### CDN\n\nYou 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.\n\nYou can also download it and use it directly on your website.\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/son-link/jukeboxjs@main/jukeboxjs.cdn.js\"\u003e\u003c/script\u003e\n```\n\n### Using tag\n\nTo embed the player on your website you must use the following tag:\n```html\n\u003cjubebox-js /\u003e\n```\n\n## Tag parameters\n\n* **src**: The URL to an audio file.\n* **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).\n* **color-text**: The color of the text\n* **color-bg**: the color of the background and text of the current track in the playlist\n* **color-btn**: the color of the buttons, the thumb of the range and the background of the current track in the playlist\ncolor-playlist: The background color of the playlist\n* **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.\n\n**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.\n\n## Extra credits\n\nThe 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).\n\nSyntactic highlighting in the examples thanks to [Prism](https://prismjs.com/index.html)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fson-link%2Fjukeboxjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fson-link%2Fjukeboxjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fson-link%2Fjukeboxjs/lists"}