h5 audio播放问题，audio获取缓存进度条

最新推荐文章于 2023-06-29 14:14:55 发布

dbp47524

最新推荐文章于 2023-06-29 14:14:55 发布

阅读量1k

点赞数 1

原文链接：http://www.cnblogs.com/lanshengzhong/p/10308218.html

版权

本文介绍如何在微信环境中使用全局audio组件，通过监听页面加载事件触发音频加载，并实现音频播放状态及进度的实时更新。文章详细展示了如何利用DOMContentLoaded事件和WeixinJSBridgeReady事件确保音频正确加载，同时提供了更新音频播放时间和进度条的方法。

摘要由CSDN通过智能技术生成

<!--全局 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）

转载于:https://www.cnblogs.com/lanshengzhong/p/10308218.html