标签：播放器 播放 自定义 拖动 音频 小圆点 audio

先看一下效果:

点击这里查看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 对象

标签：播放器,播放,自定义,拖动,音频,小圆点,audio
来源： https://www.cnblogs.com/homehtml/p/12933245.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。