zoukankan      html  css  js  c++  java
  • h5 audio播放问题,audio获取缓存进度条

    <!--全局 audio -->
        <audio
          id="audio"
          @playing="audioReady"
          @timeupdate="audioUpdateTime"
          @pause="audioPaused"
          @ended="audioEnd"
          @error="audioError"/>
    
    
    // 监听微信端页面加载 触发音频load
        document.addEventListener('DOMContentLoaded', () => {
          const audio = document.getElementById('audio')
          audio.load()
          document.addEventListener('WeixinJSBridgeReady', () => {
            audio.load()
          }, false)
        })
    audioUpdateTime(e) {
          // 更新时间和进度条 (默认一秒会执行多次 需要处理一秒只执行一次更新)
          let time = 0
          if (parseInt(e.target.currentTime) !== Number(time)) {
            time = parseInt(e.target.currentTime)
            const audio = document.getElementById('audio')
            const timeRanges = audio.buffered
            // 获取已缓存的时间  timeRanges.end(timeRanges.length - 1)
         // 计算百分比 展示进度
           parseInt(timeRanges.end(timeRanges.length - 1) * 100 / audio.duration * 100) / 100)
        }
  • 相关阅读:
    Hexo yilia 主题启用及相关设置
    Hexo Next 主题启用及相关设置
    值得一用的 Windows 软件清单
    ES6新特性2
    ES6新特性1
    手写promise第三天
    手写promise第一天
    Generator异步函数
    函子Functor
    柯里化函数组合的学习
  • 原文地址:https://www.cnblogs.com/lanshengzhong/p/10308218.html
Copyright © 2011-2022 走看看