vue3,音频循环播放

要在Vue3中实现音频循环播放，可以使用`<audio>`标签和Vue的`watch`属性来监听`isPlay`的变化。具体步骤如下：

1.在`<audio>`标签中添加`loop`属性，以实现循环播放。

2.在Vue组件中添加`watch`属性，监听`isPlay`的变化。

3.在`isPlay`的回调函数中，根据`isPlay`的值来控制音频的播放和暂停。

4.在`created`生命周期钩子函数中，为`<audio>`标签添加`ended`事件监听器，以便在音频播放结束时重新播放。

下面是一个示例代码：

<template>
  <div>
    <audio ref="audio" :src="currentSongUrl" loop></audio>
    <button @click="togglePlay">{{ isPlay ? '暂停' : '播放' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlay: false,
      currentSongUrl: 'your-audio-url'
    }
  },
  watch: {
    isPlay(val) {
      if (val) {
        this.$refs.audio.play()
      } else {
        this.$refs.audio.pause()
      }
    }
  },
  created() {
    this.$refs.audio.addEventListener('ended', () => {
      this.$refs.audio.currentTime = 0
      this.$refs.audio.play()
    })
  },
  methods: {
    togglePlay() {
      this.isPlay = !this.isPlay
    }
  }
}
</script>