Audio Player Widget

July 22nd 2024

When I wanted to add some of my musical experiments to this site, I faced the dilemma: settle for a sub-par experience or use heavyweight JavaScript.

Without JavaScript, this player layout is about the best I could come up with.

In the pure HTML player, each track is its own distinct audio element. The user experience of this approach is greatly lacking as each track is completely independent from the others. Volume changes do not propagate to other tracks, multiple tracks can be playing at once, and UI elements like the scrubber and volume bar are repeated for each track.

Unsatisfied with the pure HTML approach, I started looking for a player which:

is lightweight (only a few KiB),
works without JavaScript,
looks neat,
and is open source.

I couldn’t find anything which matched these requirements¹, so I wrote my own.

I took heavy inspiration the Bandcamp Player’s design as it looks simple and still is intuitive

Rucksack

I called the player Rucksack as a slight nod to the major inspiration for it.

To see it in action, check out one of the pages which uses it:

True to my requirements, the player:

is less than 8KiB large,
reverts to the pure HTML player without JavaScript,
looks neat,
and is Open Source.

Additional features:

Uses idiomatic(-ish) HTML.
Multi and single track modes
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. To ensure 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.

The Scritch Player was the closest thing I found, but I had a hard requirement on noscript compatibility ↩︎