HTML and CSS Reference
In-Depth Information
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
HTMLpagesothatyoucanseetherelationship betweenwhatisshownonthecanvasandthe
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
),playitwiththeaudiocontrolsinthebrowser.Youwillnoticethatthechanges
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.
