19-在Canvas中创建自定义用户控件

7.5.1　在Canvas中创建自定义用户控件

在这个程序中，将要创建以下4个控件。

• 播放/暂停按钮：用于播放或暂停音频文件，不论当前的播放状态是什么，都将展示在按钮上（例如播放的时候显示暂停）。
• 滑动的进度条：这是一个不能交互的滑块。用于展示音轨播放了多长时间，以及还剩多长时间。滑块的移动需要根据HTMLAudioElement的总长度（即durration属性）和当前播放时间（即currentTime属性）动态调整。
• 可交互的音量滑块：要创建一个可滑动的音量控件，用户可以使用鼠标单击拖动操作控制音量。这是将要创建的最棘手的控件，因为Canvas并没有对单击拖动操作提供原生支持。
• 循环切换按钮：这是一个亮点。大部分默认内置的HTML5音频播放器没有“循环/不循环”切换按钮，但是这里要添加这个功能。目前，人们正在超越标准的HTML5的功能！

图7-5所示为创建的audiocontrols.png图片。其中包含了所有在音频播放器中要用的图片。第一行包括以下图片。

• 播放/暂停按钮的播放状态。
• 播放滑块的背景。
• 移动滑动条，用在播放和音量滑块中。

第二行包括以下图片。

• 播放/暂停按钮的暂停状态。
• 音量滑块的背景。
• 循环按钮的“未选中”状态。
• 循环按钮的“选中”状态。