HTML and CSS Reference
In-Depth Information
true if the audio is not playing, regardless of whether the paused() function was called.
This means that when the application starts but we have not set autoplay , we can easily
display the proper button (play or pause) just by testing this property:
if (audioElement.paused) {;
} else {
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 audio-
controls.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
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
Search WWH ::

Custom Search