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

function updateMute() {
var mute = document.getElementById("mute");
if (audio.muted) {
mute.value = "Unmute";
}
else {
mute.value = "Mute";
}
}
function setVolume() {
var volume = document.getElementById("volume");
audio.volume = volume.value;
}

As its name suggests, the toggleMute() function toggles the muted property of the audio element. When this
is changed, the onvolumechange event is raised by the audio element. The updateMute() function responds to
that event and sets the button label according to the current value of the muted property. Again, doing it this way
ensures the button label is correct.
Finally, the setVolume() function is called when the user moves the slider on the second range control. It
sets the volume property of the audio element to whatever was selected on the range control.

■ The volume property has a value between 0 and 1. You could think of this as 0% and 100%. When you
defined the range control, the min attribute was set to 0 and max was set to 1, so the scale is correct. You can simply
set the volume property using the range value. If you wanted to display the actual value of the volume property, just
convert it to a percentage.

Note

Now you're ready to try out your custom controls. Save your changes and press F5 to debug the application.
The page should look similar to Figure 8-12 .

Figure 8-12. The completed custom controls

You did not provide any style rules so the controls are displayed using default styles. But now you have
access to the individual controls so you can arrange and style them anyway you want (refer to Chapter 4 for using
CSS styles).

Changing the Audio Source
In this example, the audio source was defined in the markup. However, you can easily control this using
JavaScript. If you're using a single src attribute as you did initially, you just need to change this attribute to
reference a different file. However, if you're using multiple source elements you'll need to update all of these and
then call the load() method.
To demonstrate this, when the clip has finished you'll change the source to a second audio clip and play that
one as well.