Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Handling Multimedia with HTML5 – Part 2

Thursday, March 20th, 2014 by Servage


There are many properties defined for the audio element in HTML5. We are going to focus on the following because they are the most useful for the applications we will build:


true or false: whether the audio should start playing automatically when it has loaded.


true or false: Setting this to true silences the audio object regardless of volume settings.


true or false: Displays controls for an audio object in an HTML page. Controls will not display on the canvas unless they are created in HTML (for example, with a <div> overlay).


The volume level of the audio object; the value must be between 0 and 1.


true or false: whether the audio object is paused. Set with a call to the pause() function.


true or false. Set when an audio object has played through its entire duration.


URL to the source file for the audio object.


Specifies whether the media file should be loaded before the page is displayed. At the time of this writing, this property has not been implemented across all browsers.

Important Audio Events

Many events are defined for the HTML5 audio element. We are going to focus on the following events because they have proven to work when building audio applications:


Raised when the browser is retrieving data while loading the file. (This still has spotty support in browsers, so be careful with it.)


Raised when the browser calculates that the media element could be played from beginning to end if started immediately.


Set to true when the audio is being played.


Set when either the volume property or the muted property changes.


Set when playback reaches the duration of the audio file and the file stops being played.

Loading and Playing the Audio

We are going to use the canplaythrough and progress events to load <audio> before we try to play it. Here is how we embed the audio for song1:

<audio id="theAudio" controls>
<source src="song1.mp3" type="audio/mp3">
<source src="song1.wav" type="audio/wav">
<source src="song1.ogg" type="audio/ogg">

Your browser does not support the audio element.


Similar to most of the applications we have built thus far in this book, we will create

event handlers for progress and canplaythrough after the window DOM object has

finished loading, and then we will call the load() method of audioElement to force the

audio file to start loading:

window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
var audioElement = document.getElementById("theAudio");

When the canplaythrough event is dispatched, canvasApp() is called. Then we start playing the audio by retrieving a reference to the audio element in the HTML page through the DOM, with a call to getElementById(). (We will create a variable named audioElement that we will use throughout the canvas application to reference the audio element in the HTML page.) We then call the play() function of audioElement:

var audioElement = document.getElementById("theAudio");;

You might be wondering why we didn’t use the preload attribute of HTMLAudioEle ment instead of forcing it to load by listening for the canplaythrough event. There are two reasons for this, and both apply to the video element as well. First, you want to preload so that you are sure the assets you need are available to your program at runtime.

Second, preloading ensures that the user will see something useful or interesting while everything is loading. By using the standard preload attribute, you (in theory) force your audio assets to load before the page loads. Because Canvas apps are interactive and can require many more assets than those loaded when the page loads, we avoid the preload attribute and load the assets within the application.

Handling Multimedia with HTML5 - Part 2, 3.0 out of 5 based on 3 ratings
Categories: Guides & Tutorials


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.