36
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.
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 that 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);
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 it with the audio controls in the browser. You will
notice that the changes are reflected by the attribute values displayed on the canvas. This
is just our first step toward integrating audio with the canvas, but it should give you a
good idea of how we will start to use audio elements and manipulate them through
JavaScript.
Figure 7-3 shows what this application looks like when it is executed in a web browser.
388 | Chapter 7: Working with Audio