HTML and CSS Reference
In-Depth Information
<div id="audioControls">
<input type="button" value="Play" id="play" onclick="togglePlay()" />
<input type="range" id="audioSeek" onchange="seekAudio()" />
<span id="duration"></span>
<input type="button" id="mute" value="Mute" onclick="toggleMute()" />
<input type="range" id="volume" min="0" max="1" step="any"
onchange="setVolume()" />
</div>
3.
Modify the
audio
element to add the necessary event handlers by adding the code
shown in bold. This also defines the
id
attributes that you'll use to access the
audio
and
source
elements.
<audio
id="audio"
autoplay
onplay="updatePlayPause()"
onpause="updatePlayPause()"
onended="endAudio()"
ontimeupdate="updateSeek()"
ondurationchange="setupSeek()"
onvolumechange="updateMute()" >
<source src="~/Media/Linus and Lucy.ogg" type="audio/ogg"
id="oggSource"
/>
<source src="~/Media/Linus and Lucy.mp3" type="audio/mp3"
id="mp3Source"
/>
<p>HTML5 audio is not supported on your browser</p>
</audio>
4.
In Visual Studio, change the debug browser to use opera, as this supports the
range controls that you are using. (You could also use Chrome if you prefer.) Save
your changes and press F5 to debug the application. The page should look like
Figure
8-11
.
Figure 8-11.
The custom audio controls
5.
Close the browser and stop the debugger.
Implementing the Event Handlers
Now you're ready to implement the event handlers. I'll group these around the three main areas (play, seek, and
volume) and explain one section at a time.
Supporting Play and Pause
Add the code shown in Listing 8-1 after the outer
div
, just before the end of the
body
element.
