zoukankan      html  css  js  c++  java
  • 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播放时间。

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

  • 相关阅读:
    图片懒加载
    python打包后,运行exe程序,报错check_hostname requires server_hostname
    eggjs上传文件,并md5名称保存
    egg-static, 静态资源配置
    js时间转换
    egg中post请求报错invalid csrf token
    egg中sequelize,时区问题,开发时修改表结构
    ImageGrab.grab截图右下角是黑屏
    css 画三角形,悬浮提示
    python 相关
  • 原文地址:https://www.cnblogs.com/yxfboke/p/9543040.html
Copyright © 2011-2022 走看看