HTML and CSS Reference
In-Depth Information
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
HTMLAudioElement
. 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
<html lang=
"en"
>
<head>
<head>
<meta
<meta charset=
"UTF-8"
>
<title>
<title>
CH7EX3: Audio Properties And The Canvas
</title>
</title>
<
script src
=
"modernizr.js"
><
/script>
<
script type
=
"text/javascript"
>
window
.
addEventListener
(
'load'
,
eventWindowLoaded
,
false
false
);
function
function
eventWindowLoaded
() {
var
var
audioElement
=
document
.
getElementById
(
"theAudio"
);
audioElement
.
addEventListener
(
"canplaythrough"
,
audioLoaded
,
false
false
);
audioElement
.
addEventListener
(
"progress"
,
updateLoadingStatus
,
false
false
);
audioElement
.
load
();
}
function
function
canvasSupport
() {
return
return
Modernizr
.
canvas
;
}
function
function
updateLoadingStatus
() {
var
var
loadingStatus
=
document
.
getElementById
(
"loadingStatus"
);
