HTML and CSS Reference
In-Depth Information
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);
}
var theCanvas = document.getElementById("canvasOne");
var context = theCanvas.getContext("2d");
audioElement.play()
setInterval(drawScreen, 33);
}
</script>
</head>
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvasOne" width="500" height="300">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Creating a Canvas Audio Player
Now that we can play an audio file directly in an HTML page using the
<audio>
tag, or
through JavaScript by creating a dynamic
HTMLAudioElement
object, it's time to step up
our game. We are going to create an audio player on the canvas that we can use to
control dynamically loaded audio files. Why do we want to do this? Well, while the
audio controls baked into HTML5-compliant browsers might look decent, it is often
necessary for developers to implement a design that more closely matches a particular
website. HTML5 Canvas provides a way to create a dynamic set of audio controls with
nearly any look-and-feel you desire.
However, this flexibility comes at a cost. HTML5 Canvas does not natively support
common GUI controls such as push buttons, toggle buttons, and sliders. So to create
a decent audio player, we need to make these types of GUI user controls from scratch.
We could create these controls in HTML and JavaScript, but we have already covered
communication between HTML and Canvas via form controls several times in this
topic. You wanted to know how to make HTML5 Canvas apps when you started read-
ing, so we won't pull any punches in this chapter.
