HTML and CSS Reference
• When the user takes his finger off the mouse button, we will assume that he no
longer wishes to set the volume, and we still stop “dragging” the slider.
• The volume will be set based on the slider's position on the x-axis in relation to
the volumeSliderStart plus a ratio ( volumeIncrement ) that we create describing how
much volume to increase or decrease based on where the slider rests.
Volume slider variables
OK, now that we have thoroughly confused you, let's talk about the process in depth.
First, we start with the canvasApp() function. In canvasApp() we need to set up some
variables to set the rules we defined in the list above.
The starting x position for the volume slider is volumeSliderStart . When the application
starts, it is equal to the x position of the volume background, or volBackX . This means
it will start at the leftmost edge of the volume slider where the volume will be set to 0 .
We will update this to the correct position based on the volume as soon as we calculate
var volumeSliderStart = volBackX;
The final x position for the volume slider is volumeSliderEnd , which is the rightmost
position. It is the position where the volume will be set to 100% (or 1 ). This position
lies at the x position of volumeSliderStart plus the width of the volume slider back-
ground ( volBackW ), less the width of the volume slider itself ( sliderW ):
var volumeSliderEnd = volumeSliderStart + volBackW - sliderW;
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 . How-
ever, the x position is calculated in quite a different way. First, we take the value of
volumeSliderStart 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
var volumeSliderX = volumeSliderStart + (audioElement.volume*
(volBackW - sliderW));
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 volumeSliderDrag = false;
Finally, we create the volumeIncrement variable. This variable tells us how much volume
to increase or decrease on the audioElement.volume property based on where the slider
is positioned on the volume background. Since the maximum value of the volume is
1 , we simply find the total width that the volume slider can move on the x-axis ( volBackW
- sliderW ) and divide 1 by that value. This will give us a product that we can multiply