Working with Audio - HTML5 Canvas - page 344

In the eventMouseUp() function, we need to add support for loop/no loop. First, we test
for a hit test point on the button with the current location of the mouse pointer. This
is identical to the test we did for the play/pause button, except that we use loopX and
loopY to find the current location of the loop/no loop button.
Next, we check the value of audioElement.loop . We need to update the value to the
opposite of the current setting. If loop is true , we set it to false ; if it is false , we set it
to true :
if ( (mouseY >=loopY) && (mouseY <= loopY+bH) && (mouseX >= loopX) &&
(mouseX <= loopX+bW) ) {
if (audioElement.loop) {
audioElement.loop = false;
} else {
audioElement.loop = true;
}
Finally, in drawScreen() we will display the proper part of the buttonSheet image for
whichever state of loop/no loop is currently set. Unlike play/pause, we display the “off”
state when loop is false and the “on” state when it is set to true because, again, there
is not an inverse relationship to the states of the button:
if (audioElement.loop) {
context.drawImage(buttonSheet, 114,32,bW,bH,loopX,loopY,bW,bH);//loop
} else {
context.drawImage(buttonSheet, 82,32,bW,bH,loopX,loopY,bW,bH); // no loop
}
Click-and-Drag Volume Slider
So now we make it to the last, but certainly not least, piece of functionality for the audio
player: the volume slider. The volume slider is an interactive control allowing the user
to manipulate it by sliding it right or left to control the volume of the playing audio
element. Before we create the volume slider, we need to define some boundaries for its
usage:
• The slider never moves on the y-axis; it will always keep a constant y value.
• The farther the volume slider is to the right (the greater the x value), the higher the
volume.
• The slider moves on the x-axis but is bounded by the starting x value of the volume
slider image— volumeSliderStart on the left and volumeSliderEnd on the right.
• 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.