audio自定义简易音频播放器

先看一下效果:

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

audio自定义简易音频播放器

功能:

  • 播放/暂停

  • 音频轨迹随意拖动

  • 播放时间及总时间

  • 静音

实现逻辑:

当然, 最终还是使用的HTML5audio的相关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;

参考资料:

上一篇:H5音频踩坑与填坑


下一篇:Monster Audio 使用教程 (八) Vst3 使用侧链功能