• Choose a category
• All
• Classic-Fiction

When the user clicks on the volume slider, we will assume that the user wants to set the volume, so we will start “dragging” the slider. This means that if the user moves the mouse on the x-axis, we will move the slider accordingly.

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 background (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. However, 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 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;

}