HTML and CSS Reference
In-Depth Information
Building Your Own Controls
All of the DOM elements and events are available in JavaScript so it's a fairly straightforward process to create
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:
Adjust volume/mute
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
JavaScript that you'll use to implement them.
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.
Search WWH ::

Custom Search