html5的audio标签如何在ios手机上实现预加载？

Question

<audio preload="auto" :src="audioSrc" @canplay="audioReady" ref="audio"></audio>

audioPlay (currentTime) {
  this.$refs.audio.play()
},
audioReady (){
  console.log('音乐准备就绪，随时可以播放')
}

在ios手机上页面加载完默认不会触发oncanplay事件，当点击播放调用audioPlay时，才会触发oncanplay显示“音乐准备就绪，随时可以播放”。说明ios手机不会初始化加载音乐，等用户点击播放时才加载。
这样就会导致点击播放隔一两秒才加载完开始播放音乐，我加的属性preload="auto"，完全没有起作用？
我试着在mounted时

  mounted () {
    setTimeout(() => {
      //this.$refs.audio.load()  不行
    
      this.$refs.audio.play()
      this.$refs.audio.pause()
    },500)
  },

让他通过调play()来加载也不行。
用什么好的解决方法吗？

Answer 1

const play = this.$refs.audio.play()
if (play !== undefined){
play.then(() => {
console.log(....)
play.play()
}).catch(err => err)
}