HTML and CSS Reference
In-Depth Information
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
showsthe“state” oflooping:thelighter,3D-looking“out”buttonisdisplayedwhentheaudio
is not set to loop. The inverse, darker button is displayed when the audio is set to loop (be-
cause 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.
Nextwecheck thevalue of
audioElement.loop
.Weneedtoupdate thevalue totheopposite
of the current setting. If
loop
is
true
, we set it to
false
; if it is
false
, we set it to
true
:
iif
( (
mouseY
>=
loopY
)
&&
(
mouseY
<=
loopY
+
bH
)
&&
(
mouseX
>=
loopX
)
&&
(
mouseX
<=
loopX
+
bW
) ) {
iif
(
audioElement
.
loop
) {
audioElement
.
loop
=
false
false
;
}
else
else
{
audioElement
.
loop
=
true
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:
iif
(
audioElement
.
loop
) {
context
.
drawImage
(
buttonSheet
,
114
,
32
,
bW
,
bH
,
loopX
,
loopY
,
bW
,
bH
);
// loop
}
else
else
{
context
.
drawImage
(
buttonSheet
,
82
,
32
,
bW
,
bH
,
loopX
,
loopY
,
bW
,
bH
);
// no loop
}
