A crank-wound wooden box with an array of tube amplifiers

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>

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>

Browsers 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 autobuffer 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">

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">

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.


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>

Photograph by Andrew Pilling, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.