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;
Search WWH ::

Custom Search