vue web移动端开发 audio问题

问题：duration的值为NaN
解决：使用oncanplay方法

const audioE = new Audio(item.audio)
audioE.oncanplay = () => {
  this.duration = parseInt(audioE.duration)
}

问题：ios一开始没有oncanplay
解决：先加载一下，load()

const audioE = new Audio(item.audio)
audioE.load()
audioE.oncanplay = () => {
  this.duration = parseInt(audioE.duration)
}

问题：点击无法正常播放，需要多次点击
解决：ios由于没有预加载，需要在一个点击事件里帮audio先预加载一下

// 在某个点击事件里先执行一次
this.audioSrc = 'xxx.mp3' //随便什么音频
this.$nextTick(async ()=>{
  await this.$refs.audio.play()
  this.$refs.audio.pause()
})

// 进行播放
this.audioSrc = this.infoData.audio
this.$nextTick(()=>{
  this.$refs.audio.play()
})

ios的audio很坑，例子里面的变量是我自己代码里，懂的自然懂