HTML and CSS Reference
In-Depth Information
Similar to most of the applications we have built thus far in this topic, we will create
event handlers for progress and canplaythrough once the window DOM object has fin-
ished 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");
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 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 <audio> tag in the page.
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);
Search WWH ::

Custom Search