Working with Audio - HTML5 Canvas - page 586

volumeSliderX and volumeSliderY are the slider's x and y positions on the canvas. The y
position is the same as the other elements in the audio player, controlStartY . However, the
x position is calculated in quite a different way. First, we take the value of volumeSlider-
Start and add the difference between slider volume background width and the slider width
( volBackW - sliderW ), multiplied by the volume property of the audioElement , which is
a number between 0 and 1 . This will give us the position relative to the starting point from
which we want to draw the volume slider for any given volume setting:

var var volumeSliderX = volumeSliderStart + ( audioElement . volume *

( volBackW - sliderW ));

var var volumeSliderY = controlStartY ;

Next we create the volumeSliderDrag variable, which we will use as a switch to tell us
whether the volume slider is being dragged by the user at any given moment:

var var volumeSliderDrag = false false ;

Finally, we create the volumeIncrement variable. This variable tells us how much volume to
increaseordecreaseonthe audioElement.volume propertybasedonwherethesliderisposi-
tioned onthevolume background.Because themaximum value ofthevolume is 1 ,wesimply
findthetotalwidththatthevolumeslidercanmoveonthex-axis( volBackW - sliderW )and
divide 1 by that value. This will give us a product that we can multiply by the x position of
the slider, relative to volumeSliderStart , to give us the volume we should set for the audi-
oElement :

var volumeIncrement = 1 / ( volBackW - sliderW );
Volume slider functionality

var

Now that we have discussed the variables we need for the volume slider, we will talk about
how we use them in the various functions of the audio player. The good news is that the im-
plementation is simple now that you know how the variables work.

In the eventMouseDown() handler, we perform a hit test point-style test, just like we did with
the play/pause and loop/no loop buttons to see whether the volume slider was clicked. If so,
we set the volumeSliderDrag variable to true . This means that the volume slider will now
to move to the x position of the mouse when we call drawScreen() :

function function eventMouseDown ( event ) {

iif ( ( mouseY >= volumeSliderY ) && ( mouseY <= volumeSliderY + sliderH ) &&
( mouseX >= volumeSliderX ) && ( mouseX <= volumeSliderX + sliderW ) ) {
volumeSliderDrag = true true ;