HTML and CSS Reference
In-Depth Information
the bounds of the area we will test. If the mouse pointer is within those bounds, we know the
button has been clicked:
function
function
eventMouseUp
(
event
) {
iif
(
timeWaited
>=
buttonWait
) {
timeWaited
=
0
;
iif
( (
mouseY
>=
playY
)
&&
(
mouseY
<=
playY
+
bH
)
&&
(
mouseX
>=
playX
)
&&
(
mouseX
<=
playX
+
bW
) ) {
NOTE
Ifyouhadimagesstackedontopofoneanother,youwouldneedtostoresomekindofstackingvalue
orz-indextoknowwhichitemwasontopandwasclickedatanyonetime.Becausethecanvasworks
in immediate mode, you would have to “roll your own,” just like the other functionality we have dis-
cussed.
After a hit is detected, we need to determine whether we are going to call the
play()
or
pause()
method of the
HTMLAudioElement
object represented by the
audioElement
vari-
able. To figure out which method to call, we simply test to see whether the audio is paused
bycheckingthe
audioElement.paused
property.Ifso,wecallthe
play()
method;ifnot,we
call
pause()
. Recall that the
HTMLAudioElement.paused
property is set to
true
if the audio
is not playing, regardless ofwhether 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:
iif
(
audioElement
.
paused
) {
audioElement
.
play
();
}
else
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
