HTML5 Canvas [127]
if (audioElement.paused) {
audioElement.play();
} else {
audioElement.pause();
}
}
}
Now, in drawScreen() we need to choose which button to display: the one representing play (green triangle) or pause (two horizontal boxes). The play button is displayed when the audio is paused, and the pause button is displayed when the audio is playing. This button is a “call to action,” so it displays what will happen when you click on it, not the status of the audio element that is playing. This inverse relationship exists because it is the standard way audio players work.
If the audioElement is paused, we display the graphic from the top row of the audiocontrols.png image represented by buttonSheet (see Figure 7-5). If it is not paused, we display the button on the second row right below it. Since that button starts at the y position of 32, we use that literal value in the call to drawImage():
if (audioElement.paused) {
context.drawImage(buttonSheet, 0,0,bW,bH,playX,playY,bW,bH);//show play
} else {
context.drawImage(buttonSheet, 0,32,bW,bH,playX,playY,bW,bH); //show pause
}
NOTE
Again, we could have represented the literal values of locations in the buttonSheet with variables, but we decided to use literals to show you the difference between how we specify buttonSheet pixel locations, and how we calculate widths and distances for placing those elements.
Loop/No Loop Toggle Button
Implementing the loop/no loop toggle button is nearly identical to implementing the play/pause button. In Figure 7-5, you can see that the last two buttons on the bottom row represent the “on” and “off” states of the loop/no loop button. Unlike the play/pause button, this button shows the “state” of looping: the lighter, 3D-looking “out” button is displayed when the audio is not set to loop. The inverse, darker button is displayed when the audio is set to loop (because it looks like the button has been pressed).
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