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
JavaScript.
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">
<head>
<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() {
