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()" />
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
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>
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
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.
Search WWH ::

Custom Search