Web Audio Widget

HTML allows web developers to embed audio in webpages. As seen below:

While handy, these builtin widgets are almost entirely uncustomizable. The font, colors, and features are set in stone. On Chrome, you get a gray background with circular corners, while Firefox shows a black background with sharp rectangular corners. It’s especially annoying to try to group a bunch of these widgets into an album.

Out of frustration for these inflexible builtin widgets, I created a drop-in replacement as seen below:

As well as single tracks, the widget supports multi-track albums. Much of the appearance including colors, fonts, and sizes it simply customizable. Adding the widget to a page is simple too, even for a HTML novice.

Basics

First, download the script to a folder on your site called “scripts” and add the following to the <head> of each page you want the widget on:

<head>
<!-- ... -->
<script src="scripts/waw.min.js"></script>
<!-- ... -->
</head>

With the script loaded, correctly marked-up audio tags will automatically turn into the widget. Below is the HTML for the above Beethoven example:

<figure data-waw>
  <figcaption>
    Sonata No. 8 &ldquo;Pathetique&rdquo; &mdash; 2nd Movement
  </figcaption>
  <audio controls src="Beethoven_Sonata_No_8_II.ogg">
</figure>

More detailed instructions are found in the README

Albums

Multiple tracks can be stitched together into on “Album” widget. As expected, only one track in an album can be playing at a time, and each track smoothly transitions to the next.

The HTML for albums is not much more complicated than for a single track:

<figure data-waw>
  <ol>
    <li>Grave – Allegro di molto e con brio
      <audio controls src="Sonata_No_8_I.ogg"></audio>
    </li>
    <li>Adagio cantabile
      <audio controls src="Sonata_No_8_II.ogg"></audio>
    </li>
    <li>Rondo: Allegro
      <audio controls src="Sonata_No_8_III.ogg"></audio>
    </li>
  </ol>
</figure>

More detailed instructions are found in the README

Technical Jargon

Some things which this player was especially designed to be:

• Gracefully degrades when JavaScript is not available.
• Makes good use of the web media session APIs for media buttons and metadata.
• Small file size ~10Kib through aggressive optimization and minification.