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)
        }
  • 相关阅读:
    BZOJ4569: [Scoi2016]萌萌哒
    BZOJ4566: [Haoi2016]找相同字符
    BZOJ4556: [Tjoi2016&Heoi2016]字符串
    BZOJ4545: DQS的trie
    BZOJ4458: GTY的OJ
    Codeforces Beta Round #19E. Fairy
    不确定性推理
    朴素贝叶斯
    对抗搜索
    struct
  • 原文地址:https://www.cnblogs.com/lanshengzhong/p/10308218.html
Copyright © 2011-2022 走看看