HTML and CSS Reference
In-Depth Information
Look Ma, No Tag!
Now check out the full application in Example 7-4 . Notice that there is no <audio> tag
defined in the HTML, but the sound still plays. This is our first step toward integrating
HTMLAudioElement objects with HTML5 Canvas.
Example 7-4. Playing a sound with no tag
<!doctype html>
<html
<html lang= "en" >
<head>
<head>
<meta
<meta charset= "UTF-8" >
<title>
<title> CH7EX4: Playing A Sound With No Tag </title>
</title>
< script src = "modernizr.js" >< /script>
< script type = "text/javascript" >
window . addEventListener ( 'load' , eventWindowLoaded , false
false );
var
var audioElement ;
function
function eventWindowLoaded () {
audioElement = document . createElement ( "audio" );
document . body . appendChild ( audioElement );
var
var audioType = supportedAudioFormat ( audioElement );
iif ( audioType == "" ) {
alert ( "no audio support" );
return
return ;
}
audioElement . addEventListener ( "canplaythrough" , audioLoaded , false
false );
audioElement . setAttribute ( "src" , "song1." + audioType );
}
function
function supportedAudioFormat ( audio ) {
var
var returnExtension = "" ;
iif ( audio . canPlayType ( "audio/ogg" ) == "probably" ||
audio . canPlayType ( "audio/ogg" ) == "maybe" ) {
returnExtension = "ogg" ;
} else
else iif ( audio . canPlayType ( "audio/wav" ) == "probably" ||
audio . canPlayType ( "audio/wav" ) == "maybe" ) {
returnExtension = "wav" ;
} else
else iif ( audio . canPlayType ( "audio/mp3" ) == "probably" ||
audio . canPlayType ( "audio/mp3" ) == "maybe" ) {
returnExtension = "mp3" ;
}
return
return returnExtension ;
Search WWH ::




Custom Search