Create a one-page website playlist for just about any1 HTML5 audio2. Custom colors for body background, link color, playlist border, and active song background color can be specified in custom.css
.
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 playing3. When the playlist is complete, it will loop back to the first track3, 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.
- 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
- PHP to read files from a local directory
- <audio> to host an audio file
- Web Audio API to manipulate that element
- mp3tag.js to read ID3 tags
git clone https://github.com/michaelchadwick/soundlister.git
cd soundlister
mkdir /path/to/soundlister/assets/audio
cp audio-file-of-awesome.mp3 /path/to/soundlister/assets/audio
php -S 127.0.0.0.1:3000
open http://localhost:3000
Thanks to CSS-Tricks for their very awesome article on making your own custom audio player.