SoundLister

Create a one-page website playlist for just about any¹ HTML5 audio². 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³. When the playlist is complete, it will loop back to the first track³, 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 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

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

Acknowledgements

Thanks to CSS-Tricks for their very awesome article on making your own custom audio player.

Footnotes

1. Supports aac,flac,m4a,mp3,mp4,ogg,wav,webm files ↩

2. HTML5 audio formats ↩

3. This feature may not work on iOS 16 or earlier if the screen is locked, but will most likely work on Android ↩ ↩²