Servage Magazine

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:

autoplay

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

muted

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

controls

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).

volume

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

paused

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

ended

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

currentSrc

URL to the source file for the audio object.

preload

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:

progress

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

canplaythrough

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

playing

Set to true when the audio is being played.

volumechange

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

ended

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.

</audio>

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");
audioElement.addEventListener('canplaythrough',audioLoaded,false);
audioElement.addEventListener('progress',updateLoadingStatus,false);
audioElement.load();
}

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");
audioElement.play();

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.