Working With Audio Files in Your HTML5 Pages
Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame
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.
The audio media which needs to be played
Setting to determine whether to preload the media - valid values are none, metadata and auto
When this is present, the audio media will automatically start playing when the page is loaded
A group of linked media elements
Boolean attribute which indicated whether to loop playback once the audio media playback is completed
Boolean attribute that determines the default state of audio output
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>
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.
<p>Demo showing how to play audio files in HTML5</p>
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>
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 firstname.lastname@example.org
IT Solutions Builder TOP IT RESOURCES TO MOVE YOUR BUSINESS FORWARD
Which topic are you interested in?
What is your company size?
What is your job title?
What is your job function?
Searching our resource database to find your matches...