Working with Audio - HTML5 Canvas - page 572

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 dynam-
ically 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
thesecontrolsinHTMLandJavaScript,butwehavealreadycoveredcommunicationbetween
HTML and Canvas via form controls several times in this topic. You wanted to know how to
make HTML5 Canvas apps when you started reading, so we won't pull any punches in this
chapter.