Get the Most Out of HTML5’s Native Audio

Lots of excitement surrounds HTML5’s native audio element. It promises cross browser standardized support for playing audio clips embedded directly in our web pages. With this new element, gone are the days of including a third party plug-in like Flash, QuickTime, or Silverlight. Of course, we’re not quite there yet.

Currently, the <audio> element  is supported in these browsers:  iOS 4+, Android 2.3+, Opera Mobile 11+, and

As web developers, we must be careful to include fallback support for older browsers in order to make sure all users get the best experiences from our sites. In this post, I’ll review the <audio> elements attributes and show how to get the most out of HTML5’s <audio> while still providing support for those pesky old web browsers.

Using <audio> in Your Page

The <audio> element works a lot like <img> by using a ‘src=”audio.mp3″‘ attribute to point to where the file exists. Here’s how:

<audio src=audio.mp3" controls />

This markup also includes the controls attribute which displays an audio control bar on the page. Notice the control display renders differently by browser. When laying out your web page, make sure to test it in all major web browsers to verify the layout is not compromised. Here are examples of how this control renders in common browsers.

<audio> Attributes

The <audio> element comes with several attributes used to specify how the element performs.

src

As shown in the example, the ‘src’ attribute indicates what audio file to load into the page.  It is similar to the ‘src’ attribute of the <img> element.  This is supported by all the major web browsers.

controls

When included, this attribute specifies that the audio display controls will be shown on the page. This is supported by all the major web browsers.

autoplay

When included, this attribute specifies that the audio file will automatically begin playing upon loading of the page.  This is generally considered poor page design.  If you decide to use this feature, make sure to have a way for the page visitor to quickly turn the sound off or down. This is supported by all the major web browsers.

loop

When included, this attribute specifies that the audio file will continue playing from the beginning once it ends. This is supported by all the major web browsers.

preload {  auto | metadata | none  }

This attribute specifies when the audio file should be loaded in the page. This one is only supported by Firefox, Chrome, and Safari.

auto =  file loads as the page loads.

metadata = loads only the file’s metadata as the page loads.

none = the page visitor must initiate the file before the file begins to load.

Here’s an example:

<audio src="audio.mp3" controls preload="none" />

Falling Back Techniques

HTML5’s <audio> performs differently by web browser because there is not yet an adopted standard for this element. This means not only does the web developer/designer need to author the page for older browsers by including plug-ins like QuickTime or Flash, but she/he must accommodate all the various audio file types supported by the various browsers. Fortunately, the <audio> element provides plenty of ways to do this.

First let’s examine how to offer alternatives for page visitors who cannot play audio files.

<audio src="audio.mp3" controls >
   <p>Your browser does not support native audio. To listen, please <a href="audio.mp3">download</a> the mp3 file to your computer.</p>
</audio>

Web browsers will automatically ignore the <audio> element and display the <p> element instead. And for web browsers that do support <audio>, the <p> element is ignored. Note that you do not need to stick with the <p> element, any HTML will work as long as it is inserted between the <audio> tags.

The <audio> element also allows the fallback to plug-ins like Flash. So, if the visitor’s web browser does not support <audio>, it can instead process the file using a plug-in.  Here’s how…

<audio src="audio.mp3" controls>
   <object data="mediaplayer.swf?audio=audio.mp3">
          <param name="movie" value="mediaplayer.swf?audio=audio.mp3">
        <p>Your browser does not support native audio or Flash. To listen, please <a href="audio.mp3">download</a> the mp3 file to your computer.</p>
    </object>
</audio>

Notice how included in the <object> tag is the markup to accommodate those visitors who cannot play the file using Flash.

Even More Fallingback

To accommodate, the <audio> element supports multiple sources for the various formats by dropping the ‘src’ attribute and nesting the <source> element into <audio>.  Here’s an example which includes all the various fallbacks:

<audio controls>
   <source src="audio.ogg">
   <source src="audio.mp3">
   <object data="mediaplayer.swf?audio=audio.mp3">
          <param name="movie" value="mediaplayer.swf?audio=audio.mp3">
        <p>Your browser does not support native audio or Flash. To listen, please <a href="audio.mp3">download</a> the mp3 file to your computer.</p>
    </object>
</audio>

In this example, the browser will first check to see if audio is supported. If it is, then the browser cycles through the <source> options until it finds the first one that is supported.  If none of the <source> options are supported, then the fallbacks are implemented.

As you can see, HTML5’s native audio has a ways to go before it can be implemented easily like an <img> element. But for pioneering developers and designers, <audio> can be a step into the future. Look for more about manipulating native audio with javascript in future posts.

HAPPY CODING!