DOMException: The play() request was interrupted by a new load request.(vue项目)

当我们使用播放器时,功能正常,报错

经过查询 , 我们在给歌曲添加地址时, 因为音乐是流式缓存, 所以就是一段一段缓存,在没有缓存好时,修改他的地址就会报错

所以我们修改这个bug的方法就是利用audio标签有一个事件, @canplay(监听音频是否加载完毕) 我们利用他去判断他的值是否为true,为true就不去播放

// 元素
<audio
      ref="audioRef"
      @pause="pause"
      @canplay="ready"
      ></audio>
const songReady = ref(false)

===========================================
// watch
    watch(currentSong, (newSong) => {
      if (!newSong.id || !newSong.url) {
        return
      }
      // audio元素对象
      const audioEl = audioRef.value
      audioEl.src = newSong.url
      audioEl.play()
    })
    watch(playing, (newPlaying) => {
    // 这里去判断
      if (!songReady.value) {
        return
      }
      const audioEl = audioRef.value
      newPlaying ? audioEl.play() : audioEl.pause()
    })
===================================
    
function ready () {
      if (songReady.value) {
        return
      }
      songReady.value = true
    }