Audio and Video - HTML5 with Visual Studio 2012 - page 173

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:

• Play/Pause

• 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
loaded

•

onvolumnechanged - raised when the volume level changes or the mute property has
changed

•

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.

eXerCISe 8-3. aDDING CUStOM CONtrOLS

1. open the Index.cshtml file and remove the controls attribute. This will cause the

audio element to be hidden.

2. Add the following div after the audio element. This will include all the input

elements that you'll need to control the audio.