HTML and CSS Reference
In-Depth Information
• 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
that value:
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
setting:
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
