brhfl.com

For the purposes of an upcoming post or more, and some other upcoming projects, it occurred to me that I might need to come up with a UI for incorporating audio samples in with posts. It needed to:

• Use HTML <audio> elements
• Be minimalist and unintrusive
  • Thus, fit inline with text
  • And have very few UI elements

Little snippets of audio have different requirements from, say, video. In keeping with my requirements, for example, I opted to omit a mute button. The snippets are short and trivial enough that pause should suffice. In fact, I opted for only five possible actions: play, pause, ¹⁄₃ volume, ²⁄₃ volume, and full volume. This boils down to two controls: one play/pause control and one three-position volume control. The result looks something like this weird ringing sound.

Audio is just linked from inside a certain class of span¹. The link remains – so users who want to or who don’t have JS enabled or who don’t have a modern browser can simply download the file. Each control is inline SVG. The play/pause button is one SVG, with either button being shown or hidden via CSS. Likewise the volume control is one SVG element, and each of the three bars defaults to the ‘off’ state. Any given bar will have the class active, and the CSS darkens the active class plus the next bar plus the next bar. Each bar has an invisible rectangle atop it that spans that entire third of the SVG, to make for an easier target.

The code is obviously snatchable, and I may release it at some point, but it’s definitely not pretty. I… don’t code pretty. I have some other reservations as well, namely accessibility. I haven’t really used SVGs quite like this before, and I don’t really know how to make AT handle it sensibly. I guess if nothing else, the link is a guaranteed fallback. Unrelated, but I was pleasantly surprised to see it working in IE11.