先看一下效果:

点击这里查看DEMO, 当然源代码也都在这个文件里啦;

功能:

• 播放/暂停

• 音频轨迹随意拖动

• 播放时间及总时间

• 静音

实现逻辑:

当然, 最终还是使用的HTML5的audio的相关API实现的;

首先, 写好播放器相关的样式并且隐藏默认的播放器;
然后, 就是一步步实现逻辑啦:

播放/暂停

audio.play()播放音频;
audio.pause()暂停音频;
音频的播放与暂停, 就执行这两函数就行啦, 然后就是切换一下相关样式的class;

音频轨迹的拖动

手动控制音频的播放轨迹, 主要使用到touch相关的事件:

1. 在touchstart时先获取小圆点的初始位置;

2. 在touchmove时需要设置小圆点的移动位置, 播放的进度条以及播放的当前时间, 还得注意拖到最后及开始时还继续拖动的位置处理;

播放时间及总时间

获取音频总时间使用loadedmetadata事件:

当元数据（比如分辨率和时长）被加载时触发的事件;

然后在事件中调用audio.duration返回音频的长度(单位秒);

获取当前播放位置的时间用audio.currentTime

静音

静音直接设置audio.muted = true/false

有几个关键点需要注意:

1. 当音频播放完毕后, 调用一下load()方法, 不然需要再次播放时得相刷新一下页面;

2. 还是播放结束后, 需要手动重置小圆点的移动位置为 0;

3. 手动拖动到最右边时, 最好是设置移动距离为 100% - 1, 不然直接拖动到结束会回到开始;

4. 当在最开始就向左拖动时直接将移动距离设置为 0;

参考资料:

• HTML 5 视频/音频参考手册

• HTML DOM Audio 对象