HTML and CSS Reference
In-Depth Information
by the
x
position of the slider, relative to
volumeSliderStart
, to give us the volume we
should set for the
audioElement
:
var volumeIncrement = 1/(volBackW - sliderW);
Volume slider functionality
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 implementation 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 eventMouseDown(event) {
if ( (mouseY >= volumeSliderY) && (mouseY <=volumeSliderY+sliderH) &&
(mouseX >= volumeSliderX) && (mouseX <= volumeSliderX+sliderW) ) {
volumeSliderDrag = true;
}
}
In the
eventMouseUp()
handler, we test to see whether the
volumeSliderDrag
is set to
true
. If so, it means that the user has released the mouse button and no longer wants
to drag the volume slider. We set
volumeSliderDrag
to
false
so the slider will not move
with the mouse:
if (volumeSliderDrag) {
volumeSliderDrag = false;
}
In
drawScreen()
we actually put the pixels to the canvas, so to speak, with the volume
slider. First, we draw the background image from
buttonSheet
:
//vol Background
context.drawImage(buttonSheet, 32,32,volBackW,bH,volBackX,volBackY,volBackW,bH);
Next, we check to see whether
volumeSliderDrag
is
true
. If so, we make the
volume
SliderX
variable equal to the mouse's
x
position. Then, we drop in a couple more tests
to determine whether the
x
position of the volume slider falls outside the bounds of the
volume background. These two tests make sure that the volume slider does not move
past the rightmost or leftmost sides of the volume slider background, and in turn, the
volume
property of
audioElement
is not calculated to be more than
1
or less than
0
:
if (volumeSliderDrag) {
volumeSliderX = mouseX;
if (volumeSliderX > volumeSliderEnd) {
volumeSliderX = volumeSliderEnd;
}