HTML and CSS Reference
In-Depth Information
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 Exam-
ple 7-3 ( CH7EX3.html ), play 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
Figure 7-3 shows what this application looks like when it is executed in a web browser.
Figure 7-3. Showing audio properties on the canvas
There are also a few attributes displayed at the bottom of this list that we have not
discussed. They all come from calls to the canPlayType() function of HTMLAudio
Element . We are only displaying these right now, but in Example 7-3 we will make use
of this function to help us decide which sound to dynamically load in JavaScript.
Example 7-3. Audio properties and the canvas
<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>CH7EX3: Audio Properties And The Canvas</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {
Search WWH ::

Custom Search