HTML and CSS Reference
Building Your Own Controls
your own controls to work with the audio element. However, there are several facets that you'll need to control so
it's not a trivial exercise. There are three areas that you'll need to address:
Displaying progress and fast-forwarding/rewinding
You will need to respond to events from both the custom controls as well as the audio element. In this
exercise, you'll start by adding all the necessary controls to the page. Then I'll show you how to implement the
event handlers that are needed for each area. The input elements that you'll use to control the audio element are:
Play/Pause button - the label will toggle between “Play” and “Pause” depending on the
state of the audio elements.
range control (introduced in Chapters 2 and 3 ) that will serve both to show
the progress and allow the user to seek a specific location.
Seek - this is a
span element that displays both the current location and the total
duration of the audio file.
Duration - this is a
Mute button - the label will toggle between “Mute” and “Unmute”.
range control that is used to specify the volume level.
The audio events that you'll provide handlers for include:
Volume - this is another
onplay - raised when the audio is started
onpause - raised when the audio is paused
onended - raised when the audio has completed
ontimeupdate - raised periodically as the audio clip is played
ondurationchanged - raised when the duration changes, which occurs when the file is
onvolumnechanged - raised when the volume level changes or the mute property has
Adding the Custom Controls
You'll start by adding the custom controls and defining the event handlers that you'll need. Then I'll explain the
eXerCISe 8-3. aDDING CUStOM CONtrOLS
open the Index.cshtml file and remove the controls attribute. This will cause the
audio element to be hidden.
Add the following div after the audio element. This will include all the input
elements that you'll need to control the audio.