9/4/13
Introduction
Before HTML5, web developers had to rely on Flash plugins to support playback of audio and video files. HTML5 attempts to solve that by specifying built-in support for audio media in the specification.
The “audio” markup element replaces any custom controls which would otherwise be needed to play audio files.
The HTML5 specification (at http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#the-audio-element) mentions “audio” markup element to represent a media element of type audio.
The supported attributes on an audio element are src, preload, autoplay, mediagroup, loop, muted and controls.
|
Attribute |
Description |
|
src |
The audio media which needs to be played |
|
preload |
Setting to determine whether to preload the media – valid values are none, metadata and auto |
|
autoplay |
When this is present, the audio media will automatically start playing when the page is loaded |
|
mediagroup |
A group of linked media elements |
|
loop |
Boolean attribute which indicated whether to loop playback once the audio media playback is completed |
|
muted |
Boolean attribute that determines the default state of audio output |
|
controls |
Boolean attribute which indicates whether a scripted controller has been provided or not. |
Let us look as a simple HTML5 markup which contains the audio element.
<audio id=”audio1″ src=”http://www.archive.org/download/KokomoArnold-SissyManBlues/KokomoArnold-SissyManBlues.mp3″ controls autoplay loop>
</audio>
Here, we can see that our audio source is a public domain file, and we have not provided a scripted controlled (controls). It has autoplay which indicates that the audio media will start playing on page load and the loop indicates that audio media will start from beginning once completed and continue to repeat.
A simple page containing HTML5 is given below.
<!DOCTYPEhtml>
<html>
<metacharset=”utf-8″>
<title>Audio sample</title>
<body>
<audioid=”audio1″src=”http://www.archive.org/download/KokomoArnold-SissyManBlues/KokomoArnold-SissyManBlues.mp3″controlsautoplayloop>
</audio>
<buttonid=”buttonStart”type=”button”onclick=”buttonStart_click()“>Start</button>
<buttonid=”buttonStop”type=”button”onclick=”buttonStop_click()“>Stop</button>
<buttonid=”buttonVolumeUp”type=”button”onclick=”buttonVolumeUp_click()“>Volume Up</button>
<buttonid=”buttonVolumeDown”type=”button”onclick=”buttonVolumeDown_click()“>Volume Down</button>
<article>
<header>
<h1>Audio sample</h1>
<p>Demo showing how to play audio files in HTML5</p>
</header>
<footer>
<h1></h1>
<p>HTML Goodies</p>
</footer>
</article>
<scripttype=”text/javascript”>
function buttonStart_click()
{
document.getElementById(‘audio1’).play();
}
function buttonStop_click()
{
document.getElementById(‘audio1’).pause();
}
function buttonVolumeUp_click()
{
document.getElementById(‘audio1’).volume+=0.1;
}
function buttonVolumeDown_click()
{
document.getElementById(‘audio1’).volume-=0.1;
}
</script>
</body>
</html>
Which is rendered like this…
<! — [if gte vml 1]> <![endif] — ><! — [if !vml] — >
<! — [endif] — >
You can see that we have added code to start and stop playback and to increase and reduce the volume of the playback.
The file to be played can be local media or something located on the internet.
Since audio is a media element, all methods applicable for a media element are available for audio elements, including seeking through media, specifying playback range, muting, etc.
If you have trouble following along, a listing of the sample is available at <download link>
Summary
In this article, we learned how simple it is to create support for audio media in HTMl5 web applications. I hope you have found this information useful.
About the author
Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com
