• Choose a category
• All
• Classic-Fiction

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

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 once the window DOM object has finished loading, and then 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('progress',updateLoadingStatus,false);

audioElement.addEventListener('canplaythrough',audioLoaded,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 may be wondering why we didn’t use the preload attribute of HTMLAudioElement 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 may require many more assets than those loaded when the page loads, we avoid the preload attribute and load the assets within the application.

Displaying Attributes on the Canvas

Now we are going to display the attribute values of an audio element playing on an HTML page. In this example (CH7EX3.html), we are also going to display the audio element in the HTML page so you can see the relationship between what is shown on the canvas and the state of the

In the drawScreen() function we will add the following code to display the attributes of the audioElement variable:

context.fillStyle = "#000000";

context.fillText ("Duration:" + audioElement.duration, 20 ,20);

context.fillText ("Current time:" + audioElement.currentTime, 20 ,40);

context.fillText ("Loop: " + audioElement.loop, 20 ,60);

context.fillText ("Autoplay: " +audioElement.autoplay, 20 ,80);

context.fillText ("Muted: " + audioElement.muted, 20 ,100);

context.fillText ("Controls: " + audioElement.controls, 20 ,120);

context.fillText ("Volume: " + audioElement.volume, 20 ,140);

context.fillText ("Paused: " + audioElement.paused, 20 ,160);

context.fillText ("Ended: " + audioElement.ended, 20 ,180);

context.fillText ("Source: " + audioElement.currentSrc, 20 ,200);

context.fillText ("Can Play OGG: " + audioElement.canPlayType("audio/ogg"),

20 ,220);

context.fillText ("Can Play WAV: " + audioElement.canPlayType("audio/wav"),

20 ,240);

context.fillText ("Can Play MP3: " + audioElement.canPlayType("audio/mp3"),

20 ,260);

You should already be familiar with most of these attributes. When you launch Example 7-3 (CH7EX3.html), play with the audio controls in the browser. You will notice that the changes are reflected by the attribute values