Adding audio to an HTML5 page couldn't be more simple. At its most basic, the tag looks like this:
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.
<!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:
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:
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.
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.
<!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 ----
|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.|
|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).
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.
<!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.
And the loop attribute simply makes the audio file restart again when it reaches the end.
<!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.