New Sep 10, 2024

The audio element

More Front-end Bloggers All from HeydonWorks View The audio element on heydonworks.com

The ability to embed images in web pages has been officially supported since 1995. Whereas, the <audio> element was not added until 2015. For 20 years, people were looking at naked people on the web. But, for the same 20 years, there was no officially sanctioned and standardized way of hearing a naked person. And if it's not sanctioned and standardized, it's just not sexy.

In the absence of a standard audio element, the only way to “embed” (shove) an audio player into a web page was using some sort of proprietary plugin.

In the context of the web, proprietary is an extremely dirty word, but not in a sexy way like you'd hope. That's because proprietary means privately owned and privately owned means privately controlled. Absolute libido killer.

In 2004, the proprietor was Macromedia (formerly Nanomedia (formerly Picomedia)) and the plugin software was called Flash. At the time, Flash enabled you to do a lot of things on the web you couldn't yet do with the web. These included disseminating pornographic sounds and pornographic moving images, hence Flash.

The temptation was to learn how to use Flash; to make it your “thing” and to do all of your work in its proprietary way. Or you could learn the standard technologies HTML and CSS, hoping they would become more powerful and expressive over time.

I knew a bit of both and I’d had a lot of fun making simple animations and games with Flash. But I chose the latter, largely because I don't trust capitalists with the web any more than I trust them with my health care.

This turned out to be one of the better decisions of my life. Today, HTML offers <audio> and <video> and CSS includes comprehensive animation facilities. Since 2023, and with offset-path, CSS even allows the kind of “tweened” animations that were Flash’s staple. Oh and JavaScript integrates pretty seamlessly with all of the above. In 2004, JavaScript was essentially a plastic carrier bag full of shurikens and cat s**t.

Meanwhile, browsers no longer support the Flash Player that made embedding my cartoon buttock-clapping Flash .swf files possible. A lot of specific things led to Flash's downfall, including recurrent security flaws and some fundamental performance issues earning Adobe (the proprietors since 2005) the ire of Apple’s Steve Jobs.

But the real story is that the web standards tortoise eventually outpaced the proprietary hare, making the technology unprofitable. To borrow a neologism from TikTok, privately owned technologies that don’t make their owners a profit get unalived. Because making a profit is the only reason they’re allowed to exist.

To include an audio player on a web page today, you just mark up an <audio> element with the controls attribute. If you want it to actually play something, you also need a src attribute pointing to a sound file.

<audio controls src="/sounds/erotic-squelching.mp3"></audio>

As a type of replaced element, the markup acts like a sort of embed code that’s replaced by an audio interface provided by the browser vendor. No weird hacks and no scumbag third parties readying to take the functionality away from you. Browsers and other software that still don’t support <audio> just treat the markup as, well, markup. So you can provide a link to the audio file as a fallback:

<audio controls src="/sounds/erotic-squelching.mp3">
  <p><a href="/sounds/erotic-squelching.mp3">erotic squelching 🍆🍆🍆</a></p>
</audio>

Wherever Adobe™ Flash™ Player™ was uninstalled or not supported, you were inexplicably presented with a picture of a piece of jigsaw puzzle. Which is considerably less helpful.

Note that controls is what's known as a Boolean attribute. In classical programming, a Boolean is a true or false value. In HTML, presence of the attribute means true and absence means false. You can supply a string of text anyway (like controls="for my music player"or controls="🪕🎶") and the string part will just be ignored.

Well… ignored by the browser, at least. Classical programmers might get quite upset and offer you an interminable lecture on the benefits of strong typing: the act of strictly setting out what types of things should take what form, even when unnecessary, and in a needlessly masculine way.

Scroll to top