Native Audio in the browser

by .

This article was last updated on 28 May 2014 to reflect changes in the spec.

Until recently, the ability to play any type of audio within a browser involved using Adobe Flash or other browser plugins. Although Adobe's Flash player is unquestionably the most ubiquitous of these, most developers and designers would agree that it's better not to rely on a plugin at all.

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 all of the major browsers support it — currently Firefox, Chrome, Safari and Opera, and Internet Explorer 9+. 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.

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"></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 and Internet Explorer 9+.)

For a list of which codecs are supported on which browser (which may differ depending on device) see our article HTML5 Audio — The State of Play.

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"> 
  <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 older versions of Firefox and Mobile Safari.

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 versions of the audio file they want to stream!

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: