{"id":20972347,"url":"https://github.com/michaelchadwick/soundlister","last_synced_at":"2025-05-14T11:34:09.337Z","repository":{"id":37296828,"uuid":"437081864","full_name":"michaelchadwick/soundlister","owner":"michaelchadwick","description":"SPA for displaying a playlist of audio.","archived":false,"fork":false,"pushed_at":"2025-03-09T23:56:49.000Z","size":1164,"stargazers_count":3,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-05-13T03:04:30.155Z","etag":null,"topics":["audio","html5","javascript","mp3","playlist","single-page-app","skeleton-template","spa","website"],"latest_commit_sha":null,"homepage":"https://soundlister.neb.host","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/michaelchadwick.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":"2021-12-10T18:46:45.000Z","updated_at":"2025-03-09T23:56:53.000Z","dependencies_parsed_at":"2024-07-11T22:46:43.966Z","dependency_job_id":"a6d719fe-5cca-44a1-b03d-9a903ee1f96a","html_url":"https://github.com/michaelchadwick/soundlister","commit_stats":{"total_commits":158,"total_committers":3,"mean_commits":"52.666666666666664","dds":0.03797468354430378,"last_synced_commit":"6947ade6b6ef00e3d2a1a11b5276b68e7a2e846e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelchadwick%2Fsoundlister","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelchadwick%2Fsoundlister/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelchadwick%2Fsoundlister/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelchadwick%2Fsoundlister/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaelchadwick","download_url":"https://codeload.github.com/michaelchadwick/soundlister/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254131985,"owners_count":22020059,"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","html5","javascript","mp3","playlist","single-page-app","skeleton-template","spa","website"],"created_at":"2024-11-19T04:07:38.856Z","updated_at":"2025-05-14T11:34:09.325Z","avatar_url":"https://github.com/michaelchadwick.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SoundLister\n\nCreate a one-page website playlist for just about any[^1] HTML5 audio[^2]. Custom text and images can be loaded by copying `custom.json.dist` to `custom.json` and updating the values. Custom colors for body background, link color, playlist border, and active song background color can be specified in `/assets/custom/colors.css`.\n\n## How to Use\n\nSoundLister will load all audio files it supports in the `/assets/audio` directory, including subdirectories.\n\nClick on the play button or click a track in the playlist to begin playback. When a track is done, it will immediately go to the next track and begin playing[^3]. When the playlist is complete, it will loop back to the first track[^3], unless you turn off playlist looping.\n\nIf the audio source contains multiple directories (a \"collection\"), then the dropdown below the audio player can be changed to filter the playlist to only use a specific collection.\n\n## Keyboard Shortcuts\n\n* Space - toggles playback and pause\n* Cmd/Win+Shift+Right - go to next track in playlist\n* Cmd/Win+Shift+Left - go to previous track in playlist\n\n## Dependencies\n\n* [PHP](https://php.net) to read files from a local directory\n* [\u0026lt;audio\u0026gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) to host an audio file\n* [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) to manipulate that `\u003caudio\u003e` element\n* [mp3tag.js](https://github.com/eidoriantan/mp3tag.js) to read ID3 tags\n\n## Local Development / Deploy\n\n1. `git clone https://github.com/michaelchadwick/soundlister.git`\n2. `cd soundlister`\n3. `mkdir /path/to/soundlister/assets/audio`\n4. `cp audio-file-of-awesome.mp3 /path/to/soundlister/assets/audio`\n5. `php -S 127.0.0.0.1:3000`\n6. `open http://localhost:3000`\n\n[^1]: Supports `aac,flac,m4a,mp3,mp4,ogg,wav,webm` files\n[^2]: [HTML5 audio formats](https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats)\n[^3]: This feature _may_ not work on iOS 16 or earlier if the screen is locked, but will most likely work on Android\n\n## Acknowledgements\n\nThanks to [CSS-Tricks](https://css-tricks.com) for their very awesome article on [making your own custom audio player](https://css-tricks.com/lets-create-a-custom-audio-player/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelchadwick%2Fsoundlister","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelchadwick%2Fsoundlister","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelchadwick%2Fsoundlister/lists"}