H5---audio播放案例

 

 

今天跟大家介绍一个最近h5--audio播放的需求案例

1用一张图来说明我的需求：如下（备注：背景图中的毛玻璃效果放到另一篇随笔里面讲了，因为在移动端有兼容问题，详情请关注我的另一篇随笔：css3实现毛玻璃效果。）

2html布局

3css代码略多，我这边代码就不放了，然后这边放上js代码，并且附上遇到的问题和解决方案

 （1）首先页面初始化

（2）初始化执行预加载缓存代码。----------  audio.buffered

     

 

 

当时报了下图的错误，然后加了蓝色框框内的判断就好了。

 

还有一点就是audio里面必须加preload=auto属性，属性表示一旦页面加载，则开始加载音频/视频

 

 

 （3）点击按钮播放暂停处理

 

 （4）播放暂停样式处理代码，红框内的代码是处理比如当总时长是17：00，当前时间会播放到17:01（偶现，所以加了下面代码强制暂停归0）

（5）时间格式化处理，将播放的时长转换成分和秒。

 

 （6）进度条每秒播放进度事件、

（7）页面进度条滑动并且点击快进快退事件

这边定义字定义了初始值

 

这边等页面audio数据已加载时才可以拖放进度条

 

 手指触摸事件

 手指滑动事件

手指离开事件，这边手指离开然后改变audio的currenttime播放时间。

整个项目的代码就在上面了，有不足的地方请多多指出和讨论谢谢。

转载于:https://www.cnblogs.com/yxfboke/p/9543040.html