25-循环不循环切换按钮

7.5.7　循环/不循环切换按钮

实现循环/不循环的切换按钮与实现播放/暂停按钮几乎一样。从图7-5中可以看到，下面一行最后两个按钮分别表示循环/不循环切换按钮的“选中”和“未选中”状态。与播放/暂停按钮不同，这个按钮显示的是循环状态：当设置不循环播放音频时，显示颜色亮、有立体突出效果的按钮；反之，如果音频设置为正在循环播放，则显示颜色暗一些的按钮，这样会让按钮看起来有被选中的效果。

在eventMouseUp()函数中，需要添加支持循环/不循环的代码。首先，将鼠标指针的当前位置与按钮做单击检测。这个过程与播放/暂停按钮的单击检测一样，只是用loopX和loopY来代表循环/不循环按钮的当前位置。

接下来，检测audioElement.loop属性的值。需要将其设置为相反的值：如果loop是true，就设为false；如果是false，就设为true。

if ( (mouseY >=loopY)&& (mouseY <= loopY+bH)&& (mouseX >= loopX)&& (mouseX <= loopX+bW)){
　 if (audioElement.loop){
　　　　　　audioElement.loop = false;
　　　　 } else {
　　　　　　audioElement.loop = true;
　　　　 }

最后，在drawScreen()函数中，要根据循环/不循环的当前设置状态显示buttonSheet图像中正确的部分。与播放/暂停按钮不同，在loop为false的时候显示“未选中”状态，在loop为true时显示“选中”状态。因为这里不存在按钮状态的反向关系。

if (audioElement.loop){
　　　　 context.drawImage(buttonSheet, 114,32,bW,bH,loopX,loopY,bW,bH);//循环
　　　} else {
　　　　 context.drawImage(buttonSheet, 82,32,bW,bH,loopX,loopY,bW,bH); // 不循环
　　　}