Audio Player Widget

July 22nd 2024

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.