Audio Player Widget
Contemporary web browsers have support for playing audio with the simple HTML tag <AUDIO>
.
In Google Chrome, it looks like this
And in Mozilla Firefox, it looks like this
(images not to scale)
Despite the difference in appearance, these widgets work well, at least for playing a single track of audio. They are less useful for playing multiple tracks in a sequence like an album of music. The inability to style the builtin widgets and their inflexibility for use with multiple tracks led me to look for alternatives.
I had a few basic features I needed in an alternative to the browser default. It must:
- work without scripting enabled.
- use mostly idiomatic HTML (no json blobs).
- have single and multi track modes.
- look clean and simple.
- have a small file size. Less than 10KiB.
I looked around a bit, but I didn’t find an audio player which met these needs… so I made my own.
Rucksack
It’s called the word rucksack because I needed a name for it, and because it has a relation to camping.
Here’s a static image of what it looks like, taken from 2023’s Experiments
One of the major requirements is that the player works even without JavaScript. Indeed it does work without scripts, but more rough around the edges.
A list of features
- Works without scripting enabled.
- Uses idiomatic HTML.
- Multi and single track modes
- Minified file size less than 8KiB
- Supports keyboard media keys (Pause, Play, Next Track, etc.)
- Supports dark mode
Usage
To begin: download the script file (github), place it in your project directory, and add this to the <HEAD>
of your webpage.
<script src="rucksack.min.js"></script>
To have a single track, the following code is used (see the documentation on <AUDIO>
)
<!-- SINGLE TRACK -->
<figure data-rsc>
<figcaption>Song title</figcaption>
<audio controls src="song.mp3"></audio>
</figure>
To have multiple tracks, the following code is used.
<ol data-rsc>
<li>
Title 1
<audio controls src="song1.mp3"></audio>
</li>
<li>
Title 2
<audio controls src="song2.mp3"></audio>
</li>
</ol>
The attribute data-rsc
on <OL>
and <FIGURE>
is used by the script to find audio tracks. For noscript compatibility, the controls
attribute is required on all <AUDIO>
Development
The source code, and documentation of how it is made is available on Github. Contributions are welcome as I’m sure there are many bugs. One area of concern is accessibility. I did some basic things to improve accessibility, but I’m sure there more I can do. Create a github issue or shoot me an email if you have ideas.