The audio Element

Contact Us or call 1-877-932-8228
The audio Element

The audio Element

Adding audio to an HTML5 page couldn't be more simple. At its most basic, the tag looks like this:

<audio src="audio-file.mp3"></audio>

However, the above code would not do anything or even show up on the page.

To give the user the ability to play and pause the audio, you need to add the controls attribute, which can be minimized as shown in the following demo. Open the demo in Chrome, IE9 or Safari to see it work.

Code Sample:

html5-audio-and-video/Demos/audio-controls.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Audio - controls</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>HTML5 Audio - controls</h1>
<article>
	<hgroup>
		<h2>Casey at the Bat</h2>
		<h3>By Ernest Lawrence Thayer</h3>
		<h4>from the San Francisco Examiner - June 3, 1888</h4>
	</hgroup>
	<audio src="../Media/casey-at-the-bat.mp3" controls></audio>
	
	<p>The Outlook wasn't brilliant for the Mudville nine that day:<br>
	The score stood four to two, with but one inning more to play.<br>
	And then when Cooney died at first, and Barrows did the same,<br>
	A sickly silence fell upon the patrons of the game.</p>
---- C O D E   O M I T T E D ----

The controller looks different in different browsers and there is no way to customize the controller using CSS. Chrome's controller is shown below: Chrome Controller

Audio Formats

If you open the last demo (html5-audio-and-video/Demos/audio-controls.html in Opera on a Mac, the controller will look like this: Controller in Opera on a Mac

That's because Opera (on Mac or PC) does not support the MP3 format. Recent versions of Firefox, running on recent versions of Windows, do support the MP3 format; Firefox on a Mac does not support the format.

Browsers that support MP3

  1. IE (from version 9)
  2. Chrome
  3. Safari
  4. Firefox on PC

Browsers that support OGG

  1. Firefox
  2. Opera
  3. Chrome

Multiple Sources

Instead of using the <audio> tag's src attribute, you can nest one or more <source> tags within the <audio> tag, each with its own src attribute and a type attribute to let the browser know if the file is of a mime type that it supports (and therefore should bother loading). Browsers will use the first file they support. The code sample below shows how to make our audio tag work in all HTML5-compliant browsers.

Code Sample:

html5-audio-and-video/Demos/audio-multiple-sources.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	<audio controls>
		<source src="../Media/casey-at-the-bat.ogg" type="audio/ogg; codecs=vorbis">
		<source src="../Media/casey-at-the-bat.mp3" type="audio/mpeg">
	</audio>
---- C O D E   O M I T T E D ----

audio Tag Attributes

Attribute Description
src Points to the audio file. Only used when there are no nested source elements.
controls Boolean. If present, indicates that controller will be displayed.
preload

Possible values:

  • auto: Browser should choose whether to preload the file.
  • metadata: Browser should only preload the metadata as the user is likely not to need the file. This is the default.
  • none: Browser should not preload anything as the user is likely not to need the file.
autoplay Boolean. If present, audio will begin to play as soon as it has loaded.
loop Boolean. If present, audio repeats indefinitely.

We have already discussed the src and controls attributes.

The preload attribute is relatively self-explanatory. You should set it to "auto" if you know the browser will need to download the file. Otherwise, you can most likely leave it out or set it to "metadata" (the default).

autoplay

You can get the audio file to play in the background by removing the controls attribute and adding the autoplay attribute as shown in the following demo.

Code Sample:

html5-audio-and-video/Demos/audio-autoplay.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	<audio autoplay>
		<source src="../Media/casey-at-the-bat.ogg" type="audio/ogg; codecs=vorbis">
		<source src="../Media/casey-at-the-bat.mp3" type="audio/mpeg">
	</audio>
---- C O D E   O M I T T E D ----

Open the file to hear the poem.

loop

And the loop attribute simply makes the audio file restart again when it reaches the end.

Code Sample:

html5-audio-and-video/Demos/audio-loop.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
	<div>
		<p>
			<strong>Add Cheering</strong>: <em><a href="http://creativecommons.org/licenses/sampling+/1.0/">Creative Commons License</a></em><br>
			<small>- downloaded from <a href="http://www.freesound.org/samplesViewSingle.php?id=22952">The Freesound Project</a></small>
		</p>
		<audio controls loop>
			<source src="../Media/cheer.ogg" type="audio/ogg; codecs=vorbis">
			<source src="../Media/cheer.mp3" type="audio/mpeg">
		</audio>
	</div>
---- C O D E   O M I T T E D ----

You can now add cheering when Casey comes to bat.

Getting and Creating Audio Files

  1. The Freesound Project - a website for downloading free sounds under the Creative Commons license. Requires registration.
  2. Audacity - free, open source software for recording and editing sounds. Available for Windows, Mac, and Linux.
  3. oggdropXPd - Windows-based drag and drop tool for quickly converting MP3 files to OGG.
  4. Switch Audio File Converter Software - tool for quickly converting between audio file types. Available for Mac and Windows. Free and commercial licenses available.
Next