UX Design and Development course

HTML5 Audio — The State of Play

This is a follow up to my 2009 article Native Audio in the Browser, which covers the basics of HTML5 audio. It may well be worth reading if you want to get a feel for the <audio> element and associated API.

Now, two and a half years later, it’s time to see how things are progressing. With many new advanced audio APIs being actively worked on and plenty of improvements to the existing native audio we all know and love, it’s certainly an exciting time to revisit the heady world of <audio>.

A good way of understanding how the land lies is by going through a few use cases. That’s what I’ll attempt to do in this post.

So how do we get started? Well, there are a few things we need to do to prepare the ground. Let’s tackle MIME types first.

Keep reading ...

Simple audio inclusion

The following are examples of how to include HTML5 audio into your site:

<audio src="song.mp3"></audio>

Here is the example with some attributes added:

<audio src="song.mp3" autoplay controls loop preload="auto"></audio>

autoplay

A Boolean attribute; if specified (even if the value is "false"!), the audio will automatically begin to play back as soon as it can do so without stopping to finish loading the data.

controls

If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.

loop

A Boolean attribute; if specified, we will, upon reaching the end of the audio, automatically seek back to the start.

preload

This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:

  • none: hints that either the author thinks that the user won't need to consult that audio or that the server wants to minimize its traffic; in others terms this hint indicates that the audio should not be cached;
  • metadata: hints that though the author thinks that the user won't need to consult that audio, fetching the metadata (e.g. length) is reasonable;
  • auto: hints that the user needs have priority; in others terms this hint indicated that, if needed, the whole audio could be downloaded, even if the user is not expected to use it; the empty string: which is a synonym of the auto value.

Audio fallbacks

The <audio> element is capable of accepting multiple <source> elements. This is the key to allow for multiple fallback versions of the audio file.

<audio controls>
  <source src="song.oga" type='audio/ogg; codecs="vorbis"'>
  <source src="song.m4a" type='audio/mp4; codecs="mp4a.40.2"'>
</audio>

Produce audio in multiple formats

Tools to help save the same audio in different formats: