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
andcurrentTime
properties of theHTMLAudioElement
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 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
Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.