先看一下效果:
点击这里查看DEMO, 当然源代码也都在这个文件里啦;
功能:
播放/暂停
音频轨迹随意拖动
播放时间及总时间
静音
实现逻辑:
当然, 最终还是使用的HTML5
的audio
的相关API
实现的;
首先, 写好播放器相关的样式并且隐藏默认的播放器;
然后, 就是一步步实现逻辑啦:
播放/暂停
audio.play()
播放音频;audio.pause()
暂停音频;
音频的播放与暂停, 就执行这两函数就行啦, 然后就是切换一下相关样式的class
;
音频轨迹的拖动
手动控制音频的播放轨迹, 主要使用到touch
相关的事件:
在
touchstart
时先获取小圆点的初始位置;在
touchmove
时需要设置小圆点的移动位置, 播放的进度条以及播放的当前时间, 还得注意拖到最后及开始时还继续拖动的位置处理;
播放时间及总时间
获取音频总时间使用loadedmetadata
事件:
当元数据(比如分辨率和时长)被加载时触发的事件;
然后在事件中调用audio.duration
返回音频的长度(单位秒);
获取当前播放位置的时间用audio.currentTime
静音
静音直接设置audio.muted = true/false
有几个关键点需要注意:
当音频播放完毕后, 调用一下
load()
方法, 不然需要再次播放时得相刷新一下页面;还是播放结束后, 需要手动重置小圆点的移动位置为
0
;手动拖动到最右边时, 最好是设置移动距离为
100% - 1
, 不然直接拖动到结束会回到开始;当在最开始就向左拖动时直接将移动距离设置为
0
;