HTML and CSS Reference
In-Depth Information
Figure 7-4. Sound loaded and played “on” the canvas
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 lang="en">
<head>
<meta charset="UTF-8">
<title>CH7EX4: Playing A Sound With No Tag</title>
<script src="modernizr-1.6.min.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
var audioElement;
function eventWindowLoaded() {
audioElement = document.createElement("audio");
document.body.appendChild(audioElement);
var audioType = supportedAudioFormat(audioElement);
if (audioType == "") {
alert("no audio support");
return;
}
audioElement.setAttribute("src", "song1." + audioType);
audioElement.addEventListener("canplaythrough",audioLoaded,false);
}
