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 (for example, show pause when playing).
A sliding progress bar
This is a non-interactive 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 outstripping the func-
tionality 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
