likes
comments
collection
share

HTML <audio> 安卓手机 默认浏览器获取时长为 0音频标签 安卓获取时长为0的情况 公司在发行音频相关的NF

作者站长头像
站长
· 阅读数 17

音频标签 安卓获取时长为0的情况

公司在发行音频相关的NFT业务,在实体机测试阶段发现音频是 播放正常 的,但是音频的总时长是获取不正常的,总是为0:00???


安卓中无效代码

init(){// 在mounted阶段调用
  let load = (data) => new Promise(resolve => {
      this.audioDom = new Audio()
      this.audioDom.src = data
      this.audioDom.addEventListener('canplay', resolve)
  })
  load(this.audioData)
      .then(()=>{
          this.canPlay = true // 可以播放了
          this.audioTime = Math.floor(this.audioDom.duration) // 获取时长
      })
}

苹果有效,安卓总是为0

苹果是通过监听durationchange来知道是否可以播放,而安卓无论是用 <audio> 标签直接来播放、更换是否可播放的“监听事件”(canplaythroughcanplay)但都无济于事,因为开头说到过音频是可正常播放的说明只是安卓获取不到音频时长,

切换思路

通过用视频标签来播放音频,浏览器加载图片、音频资源只会加载一次的原理,并不会影响用户流量。 由于默认video对象没有对应的Video构造函数,而只能通过DOM去创建。就是

安卓中有效代码

init(){// 在mounted阶段调用
  let dom = document.querySelector('#videoElem') // 获取视频元素
  dom.oncanplaythrough = ()=>{// 监听视频中的音频是否加载完
      this.audioTime = Math.floor(dom.duration) //获取时长
  }
  let load = (data) => new Promise(resolve => {
      this.audioDom = new Audio()
      this.audioDom.src = data
      this.audioDom.addEventListener('canplay', resolve)
  })
  load(this.audioData)
      .then(()=>{
          this.canPlay = true // 可以播放音频
      })
}

注意事项

在组件生命结束之前要销毁音频

this.audioDom.pause() 
this.audioDom = null

时间有限还要加班,有啥问题欢迎评论区指出哦~

转载自:https://juejin.cn/post/7003165795849076743
评论
请登录