demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

HTML5 Audio

html / multimedia

Estimated reading time: 2 minutes, 33 seconds

In its simplest incarnation, using the <audio> tag in an HTML5 page couldn’t be easier; just point the element to the correctly formatted audio file, just as you would an img tag:

<audio src="hail-destroyer.mp3">

Controls are optional and built into the browser, but should generally be turned on:

<audio src="hail-destroyer.mp3" controls>

(Note that I am using the shortened version of the controls attribute in this case. controls is a boolean attribute: a browser audio controller panel is shown if it is present, and is not shown if the attribute is absent. If I wanted to follow XHTML rules, I could write controls="controls", but even I find that redundant. It is also possible to externalize and customize the controls with JavaScript.)

Autoplaying and looping the audio file as soon as the page loads is possible, but should never, ever be used, outside of testing purposes:

<audio src="hail-destroyer.mp3" controls autoplay loop>

Safari and Chrome will automatically buffer the audio file as it loads: i.e. both browsers will load as much of the file as possible before the user presses play, enabling smooth playback. Because of this, the auto buffer boolean attribute (which you will see referred to in some older HTML5 guides) was dropped in HTML5 in exchange for a preload attribute. preload may be set to none, auto or metadata. auto is the default, none turns off buffering (for example, if you have 10 audio files on the page, you may way to turn off buffering so the browser does not get hammered with simultaneous multiple download requests) and metadata only downloads ID3 information (track, artist and length information, etc).

As we’ve discussed, the problem is not with the <audio> tag itself, but with codec support: I would currently suggest that you encode the audio as mp3 and ogg to cover all browsers. If you do that, you cannot place both files inside the <audio> tag itself. The attributes we have discussed are left in the <audio> tag, but the files are moved to the rather confusingly-named <source> tag:

<audio controls>
<source src="hail-destroyer.mp3">
<source src="hail-destroyer.ogg">
</audio>

Personally I would prefer to think of source as stream, to get away from the “source – src” redundancy and confusion. You may prefer to consider the files as alternate streams, but the source tag must be used to load them into the page.

MIME Types

It is vital that your web hosting server deliver the files with the correct MIME types for the browser to understand them. It is possible that browsers will understand the files delivered natively, but adding the MIME type doesn’t hurt:

<audio controls>
<source src="hail-destroyer.mp3" type="audio/mpeg">
<source src="hail-destroyer.ogg" type="audio/ogg">
</audio>

Alternatively, you can add the audio types to the .htaccess file to force the correct MIME type:

AddType audio/ogg .ogg
AddType audio/mpeg .mp3

If you do so, there is no need to add a type attribute to each audio stream.

Fallback

The easiest fallback for browsers that do not understand HTML5 tag is to embed an <object> tag that calls the .mp3 file into the Flash player, if present, and shows a hyperlink to the .mp3 file if that fails:

<audio controls>
<source src="hail-destroyer.mp3" type="audio/mpeg">
<source src="hail-destroyer.ogg" type="audio/ogg">
<object type="application/x-shockwave-flash" data="player.swf?soundFile=hail-destroyer.mp3">
<param name="movie" value="player.swf?soundFile=hail-destroyer.mp3">
<a href="hail-destroyer.mp3">Download the audio file</a>
</object>
</audio>
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.