Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michaelchadwick/soundlister
SPA for displaying a playlist of audio.
https://github.com/michaelchadwick/soundlister
audio html5 javascript mp3 playlist single-page-app skeleton-template spa website
Last synced: 2 months ago
JSON representation
SPA for displaying a playlist of audio.
- Host: GitHub
- URL: https://github.com/michaelchadwick/soundlister
- Owner: michaelchadwick
- License: mit
- Created: 2021-12-10T18:46:45.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-24T18:22:19.000Z (3 months ago)
- Last Synced: 2024-10-26T01:04:48.176Z (3 months ago)
- Topics: audio, html5, javascript, mp3, playlist, single-page-app, skeleton-template, spa, website
- Language: JavaScript
- Homepage: https://soundlister.neb.host
- Size: 1.07 MB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SoundLister
Create a one-page website playlist for just about any[^1] HTML5 audio[^2]. Custom colors for body background, link color, playlist border, and active song background color can be specified in `custom.css`.
## How to Use
SoundLister will load all audio files it supports in the `/assets/audio` directory, including subdirectories.
Click 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.
If 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.
## Keyboard Shortcuts
* Space - toggles playback and pause
* Cmd/Win+Shift+Right - go to next track in playlist
* Cmd/Win+Shift+Left - go to previous track in playlist
## Dependencies
* [PHP](https://php.net) to read files from a local directory
* [<audio>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) to host an audio file
* [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API) to manipulate that `` element
* [mp3tag.js](https://github.com/eidoriantan/mp3tag.js) to read ID3 tags
## Local Development / Deploy
1. `git clone https://github.com/michaelchadwick/soundlister.git`
2. `cd soundlister`
3. `mkdir /path/to/soundlister/assets/audio`
4. `cp audio-file-of-awesome.mp3 /path/to/soundlister/assets/audio`
5. `php -S 127.0.0.0.1:3000`
6. `open http://localhost:3000`
[^1]: Supports `aac,flac,m4a,mp3,mp4,ogg,wav,webm` files
[^2]: [HTML5 audio formats](https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats)
[^3]: This feature _may_ not work on iOS 16 or earlier if the screen is locked, but will most likely work on Android
## Acknowledgements
Thanks 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/).