23-滑动播放指示器

7.5.5　滑动播放指示器

滑动播放指示器是在画布上绘制的最简单的控件。它是不可交互的控件，只是为用户提供了一个可视化的方式显示还剩余多少音频片段可播放。

首先，在canvasApp()中，需要确保以一个间隔循环调用drawScreen()函数，这样可以显示更新后的控件。

function gameLoop() {
　　　　　 window.setTimeout(gameLoop, 20);
　　　　　 drawScreen()
　 }
gameLoop();

提示

与在画布上显示视频不同，这里并没有调用drawScreen()来更新播放中的音频。在JavaScript中，音频播放与画布完全独立。每隔一段时间调用drawScreen()是很有必要的，因为创建的音频控制界面需要在音频播放时不断更新。

在drawScreen()函数中，需要在画布上绘制滑块和背景。从audiocontrols.png加载单一的buttonSheet图片，从中“切割”出所需要显示的图像。为了绘制背景，要使用之前设置过的值。可以直接使用数值（32，0）来定位图像的起始点，因为这些值在buttonSheet图像上不会变化。不过，这里会使用之前创建的变量来确定宽度和高度，并确定背景在画布上的最终位置。

context.drawImage(buttonSheet, 32,0,playBackW,bH,playBackX,playBackY,playBackW,bH);

绘制播放滑块稍微有点复杂。在绘制之前，需要先创建一个变量来表示音频播放长度和滑动区域宽度之间的关系。这样就能根据音频播放了多久来确定滑块在x轴上移动多远了。听起来有点复杂，但其实就是一个分数。用播放滑块背景的宽度除以播放音频的总长度（audioElement.duration），将得到的比率存储在sliderIncrement变量中，然后用它来确定播放滑块在画布中的位置。

var slideIncrement = playBackW/audioElement.duration;

现在，需要计算滑块的x轴坐标位置。x轴坐标位置是滑块起始位置（这个位置就是控制界面的起始位置加播放/暂停按钮的宽度：controlStartX+bW）与音频当前播放位置之和。计算播放位置的方法是，使用刚刚创建的滑动比率sliderIncrement乘以音频片段当前的播放时间audioElement.currentTime。

var sliderX = (controlStartX+bW)+(slideIncrement*audioElement.currentTime);

现在需要做的是，将图像绘制在画布上，然后检查音频播放是否结束。如果结束，就将播放位置重新放在回放区域的开始处，然后调用audioElement.pause()函数暂停音频播放。如果设置了循环播放，要将currentTime属性设置为0，然后从头开始播放音频。

context.drawImage(buttonSheet, 238,0,sliderW,bH,sliderX,controlStartY,sliderW,bH);
if (audioElement.ended && !audioElement.loop){
　 audioElement.currentTime = 0;
　 audioElement.pause();
}

接下来，为了防止接受太多的事件，需要更新变量timeWaited。

timeWaited++;

现在处理播放/暂停按钮。