Enter HTML5 <audio>

One of the most exciting and long-awaited features in HTML5 the <audio> element, enabling native audio playback within the browser. We can take advantage of this now as nearly all of the major browsers support it — currently Firefox, Chrome, Safari and Opera, but they are soon to be joined by Internet Explorer 9 which is currently in beta. For browsers that don't support audio natively, we can easily fallback to Flash.

According to spec

Currently, the HTML5 spec defines five attributes for the <audio> element:

1. src — a valid <abbr>URL</abbr> specifying the content source
2. autoplay — a boolean specifying whether the file should play as soon as it can
3. loop — a boolean specifying whether the file should be repeatedly played.
4. controls — a boolean specifying whether the browser should display its default media controls
5. preload — none / metadata / auto — where 'metadata' means preload just the metadata and 'auto' leaves the browser to decide whether to preload the whole file.

Note preload supercedes autobuffer in the latest HTML5 spec. Previously autobuffer took a boolean value specifying whether the file is to be buffered in advance. Currently, browsers are making the transition from autobuffer to preload so we suggest that you use both attributes for the time being.

Incidentally these are the same attributes defined for the <video> element.

Examples

Let's take a couple of these attributes and create a simple example that will play an audio file:

<audio src="elvis.ogg" controls preload="auto" autobuffer></audio>

(This example will work for the latest versions of Firefox, Chrome and Opera. You'll need to replace the Ogg file with an MP3 to get it working in Safari.)

Of course, the spec is not finalised, and there isn't yet a consensus on which codecs to support. This table details the codecs supported by today's browsers:

To create our own controls, we can use the API methods defined by the spec:

• play() — plays the audio
• pause() — pauses the audio
• canPlayType() — interrogates the browser to establish whether the given mime type can be played
• buffered() — attribute that specifies the start and end time of the buffered part of the file

Use the Source

The best way to coerce browsers into playing audio (or video, for that matter) is to use the <source> element. The browser will try to load the first audio source, and if it fails or isn't supported, it will move on to the next audio source. In addition, we can embed a Flash player if all else fails:

<audio controls preload="auto" autobuffer> 
  <source src="elvis.mp3" />
  <source src="elvis.ogg" />
  <!-- now include flash fall back -->
</audio>

One caveat, though: you may need to be careful about the order of the <source> elements. At the time of going to press issues have been reported with Mobile Safari and older versions of Firefox.

Cross-Browser Implementation

When we created jPlayer, an audio player plugin for jQuery, we were attempting to address some of the limitations of the current crop of Flash-based audio players. Many relied on Flash to implement the player's graphical interface, effectively isolating the player from the rest of the web design process.

The original jPlayer relied on Flash to play the actual audio while allowing the look and feel to be styled via HTML and CSS. With growing support for HTML5 in modern browsers, we were inspired to break our Flash dependency and use native audio when it was supported.

The most significant issue is the cross-browser implementation, where lack of a common supported audio format among browsers causes complications. If developers want to take full advantage of all browsers that support HTML5 audio, they'll need to create both MP3 and Ogg (and in Opera's case, WAV) versions of the audio file they want to stream!

Since the HTML5 standard is still a work in progress, several aspects of the <audio> element vary from browser to browser. For example, there seems to be no way to determine the load progress of an audio file in all browsers as this relies on buffered DOM attribute being implemented. Chrome has implemented buffered, in Safari it's there but seems to behave slightly differently, current versions of Opera and Firefox however don't support it (although Firefox 4 beta does).

Although these inconsistencies aren't showstoppers, in order to compete effectively with plugin-based solutions, we believe any HTML5 audio implementation should be consistent across all browsers and match current implementations feature for feature.

JavaScript solutions

If we intend to take advantage of each browser's audio capabilities, we need to create different solutions for different browsers. We could use browser sniffing, but considering the rapidly changing landscape, it's better to check what capabilities a particular browser supports and adapt accordingly.

To demonstrate this "feature sniffing", we've created a rough and ready HTML5 audio checker.

Using JavaScript, you can check for audio tag support:

// returns a boolean
var audioTagSupport = !!(document.createElement('audio').canPlayType);

or check file type compatibility:

// Need to check the canPlayType first or an exception
    // will be thrown for those browsers that don't support it      

    var myAudio = document.createElement('audio'); 
    
    if (myAudio.canPlayType) {
      
       // Currently canPlayType(type) returns: "", "maybe" or "probably" 

       var canPlayMp3 = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/mpeg');
       var canPlayOgg = !!myAudio.canPlayType && "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"');
    }

Note that to change the src attribute of an audio object or element, you'll need to recreate the object or element with the new value for its src attribute or alternatively change the src URL and then issue a myAudio.load() command.

So, to create a solution that takes full advantage of HTML5 audio, you'll typically need to:

1. check for HTML5 audio support, and if not present, fall back on Flash,
2. check the level of HTML5 audio support and adapt your code accordingly for each browser, and
3. check what file types are supported and link to appropriate formats of the files.

The Road Ahead

Although HTML5 audio is a relatively immature part of the standard, if recent trends continue and users upgrade to the latest versions of Safari, Firefox, Chrome and Opera, browser support is likely above 30% today. This is a significant chunk of the browser market that will no longer need to rely on Adobe's Flash, Microsoft's Silverlight, or any other browser plugin for audio support. Add to this the fact that Internet Explorer 9 supports HTML5 audio and we could easily see the majority of installed browsers supporting it in the very near future.

And when you consider that mobile and other lower-spec devices such as tablets are choosing to support HTML5 audio, you begin to paint a picture of how important native audio support is becoming.

Further reading:

• [whatwg] Codecs for <audio> and <video>

• Which browsers support HTML5 <audio> on Windows today?

Native Audio in the browser originally appeared on HTML5 Doctor on July 29, 2009.