Alexander Bass

Audio Player Widget

Contemporary web browsers have support for playing audio with the simple HTML tag <AUDIO>. In Google Chrome, it looks like this

Chrome widget with white background and rounded borders

And in Mozilla Firefox, it looks like this

Firefox widget with black background and square borders

(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:

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

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.