HTML and CSS Reference
In-Depth Information
Creating Custom User Controls on the Canvas
For this application we are going to create four elements:
Play/pause push button
The audio file is either playing or is paused. Whichever state it is currently in, we
show the other button (i.e., show pause when playing).
A sliding progress bar
This is a noninteractive slider. It displays how much of the audio track has played
and how much is left to play. The movement of this bar needs to be dynamic and
based on the
duration
and
currentTime
properties of the
HTMLAudioElement
object.
An interactive volume slider
We want to create a sliding volume control that the user can manipulate with a
click-and-drag operation. This is the trickiest control we will build because Canvas
has no native support for click-and-drag.
A loop toggle button
This is a bonus. Most of the default embedded HTML5 audio players do not have
a loop/no-loop toggle button, but we are going to add one. Already, we are out-
stripping the functionality of standard HTML5!
Figure 7-5
shows the
audiocontrols.png
image that we created. It holds all the images
we will use for the audio player. The top row consists of:
• The play state of the play/pause button
• The background of the play slider
• The moving slider we will use for the play and volume sliders
The second row consists of:
• The pause state of the play/pause button
• The background of the volume slider
• The “off” state of the loop button
• The “on” state of the loop button
Figure 7-5. audiocontrols.png
Loading the Button Assets
Since we are going to load in both an audio file and an image file for this application,
we need to employ a strategy that will allow us to preload two assets instead of just
