HTML5 Canvas, 2nd Edition

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