Native Audio with HTML5

By Emily P. Lewis

Once upon a time, audio on the web lived primarily in the world of third-party browser plug-ins like Flash, QuickTime and Silverlight. This was not a bad world, but it had its issues.

For one, most plug-ins require the user to install them, but not all users are willing (or able) to install them. Also, many players built with these plug-ins are inaccessible, making it difficult for folks who use assistive technologies to access the audio or alternative content.

Then there are the front-end design hassles like trying to get a dropdown menu to display on top of a plug-in-based player. And let’s not forget that to build a custom player with these plug-ins requires knowledge and expertise in that SDK.

Enter HTML5

Today, we have another option: HTML5 This new element allows you to deliver audio files directly through the browser, without the need for any plug-ins. It works much like the tried-and-true element, embedding the audio file into a web page via the src attribute:

Not only does native audio deliver independence from plug-ins, it can be targeted with CSS and JavaScript. This means that creating a custom player is simply a matter of writing HTML, CSS and JS. It also means more front-end control for responsive, dynamic designs and potentially better accessibility.

As far as browser support goes,

Sound good? Then let’s get started adding embedded audio in our web pages!

A Basic Audio Player

To add a simple audio player to your web page, all you need is a single line of markup:

This includes the src attribute I already discussed, which embeds the specified audio file into the page. It also includes the controls attribute, which tells the browser to use its default control interface for audio.

As you can see in Figure 2, each browser has a different default for player controls but all include the basics: play/pause toggle, timeline progress bar and volume control.

More Attributes

Beyond src and controls,

Autoplay

The Boolean autoplay attribute is one that I don’t recommend using because it specifies that the audio begin playing as soon as the page loads. This is a usability no-no for most scenarios, so exercise restraint in using this attribute.

If you do decide to utilize autoplay, please be sure to include the controls attribute (or roll your own custom controls) so that your users can stop the audio or reduce volume.

Crossorigin

crossorigin is used to indicate if an audio file is being served from a different domain. This is a very new attribute introduced for all media elements (

Depending on the scenario, crossorigin can be declared with an empty string or with CORS settings attribute keywords: user-credentials or anonymous.

Loop

Another Boolean attribute, loop, tells the browser to loop the audio when playing. Like autoplay, I’m not a particular fan of this attribute because it takes control away from the user. But if you must use it, I recommend including the controls attribute alongside loop.

Mediagroup

mediagroup is another relatively new attribute that is used to tie together multiple media files for synchronized playback. Each media element with the same keyword value for mediagroup is, essentially, linked and can be manipulated for playback via the DOM.

This attribute is valid for all media elements, so it is possible to link audio to audio, as well as audio to video and video to video.

Muted

The Boolean attribute muted does just what it says: mutes the audio file upon initial play. The user can then override this if volume controls are provided.

preload

The preload attribute suggests how the browser should buffer the audio, according to the specified value:

• preload=”auto” (same as the Boolean preload in the example) leaves it up to the browser to decide whether to begin downloading.
• preload=”metadata” tells the browser to download information like tracks and duration, but to wait to buffer the audio until the user selects play.
• preload=”none” tells the browser that no audio information should be downloaded until the user activates the controls.

Make note that not all browsers support all of these attributes and that the specification itself is still changing. That means you have to experiment, test and stay up-to-date on the spec.

Fallback Content

As I already mentioned,

1.  
2.  

   Your browser does not support native audio, but you can download this MP3 to listen on your device.

3.  

For browsers that don’t support

In this example, I chose to include some explanatory text and a link to download the audio file for my fallback content. But you can pretty much include any content you want to serve to those users, including HTML.

Not a Perfect World

HTML5

Unfortunately, like the world of plug-ins, native audio has its issues too.

No Single Codec

To keep audio content for the web at reasonable sizes for streaming and download, audio data is compressed/decompressed using codecs. Different codecs transform the audio into different formats that offer good quality with minimum bitrates.

Multiple Audio Files

Fortunately,

As you can see in this example, to declare multiple audio files, you first drop the src attribute from

A browser will read the first-listed and, if it supports the specified file format, the audio player will render on the page. If the browser doesn’t, it moves on to the next element.

In the event the browser doesn’t find a file format it can support, it will fail and playback won’t be possible:

But this is where you can take advantage of fallback content, which must be nested within

1.  
2.  
3.  
4.  

   Your browser does not support native audio, but you can download this MP3 to listen on your device.

5.  

In this example, a browser will first check if it supports

If it does support

Files & Order

In terms of which file formats to include, it isn’t necessary to have all formats listed in Figure 3. Including just MP3 and OGG will cover all your bases for modern browsers supporting HTML5

Regarding source order, it technically doesn’t matter which audio file format is listed first. That said, I usually include my OGG first. It is the higher-quality file, compared to MP3, and I want browsers that support both to get the OGG first. Also, there was a bug in older versions of Firefox where if the first format was MP3 it failed, so listing OGG first can avoid triggering this bug.

MIME Types

In addition to specifying multiple audio formats, it is also good practice to specify MIME types for each audio file:

1.  
2.  
3.  
4.  

   Your browser does not support native audio, but you can download this MP3 to listen on your device.

5.  

By specifying a MIME type for each audio format, it helps the browser know what type of content it will be dealing with. This can speed up

Also, some browsers won’t play audio without the correct MIME type. For example, Safari 5.1 (at least as of this writing) will fail to play any audio if the first-listed is an unsupported format like OGG without a specified MIME type.

Server Support

During my experiments with

And if your server doesn’t support a given format, you won’t have playback … something I discovered (not quickly enough) when an

I’m am the furthest thing from a expert on server configurations, but I have found success circumventing these MIME type issues by updating my sites’ .htaccess files to reference the correct file types. And the HTML5 Boilerplate.htaccess file is a fantastic template to start with.

Making the Transition

HTML5 is still new to so many developers. So maybe you aren’t quite ready to take the leap headfirst into

I completely understand wanting the best possible experience for all your users, regardless of their browsers. Fortunately, you can ease into HTML5

Flash Fallback

As I mentioned,