Vue使用H5的audio按顺序播放音频

以下是一个使用 Vue.js 控制 HTML5 音频按顺序播放的示例代码：

<template>
  <div>
    <audio ref="audio" controls @ended="playNext">
      <source v-for="(src, index) in sources" :key="index" :src="src" type="audio/mpeg">
      Your browser does not support the audio tag.
    </audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sources: ['audio1.mp3', 'audio2.mp3', 'audio3.mp3'],
      index: 0
    };
  },
  methods: {
    playNext() {
      this.index++; // 播放索引加 1
      if (this.index < this.sources.length) {
        this.$refs.audio.src = this.sources[this.index]; // 切换到下一个音频文件
        this.$refs.audio.play(); // 播放音频
      }
    }
  },
  mounted() {
    this.$refs.audio.src = this.sources[this.index]; // 设置第一个音频文件的路径
    this.$refs.audio.play(); // 播放第一个音频文件
  }
};
</script>

这个代码示例中，我们使用了 Vue.js 的 `ref` 属性来获取 `audio` 元素的引用，并使用 `v-for` 指令动态生成多个 `source` 元素以设置多个音频文件的路径。在 `data` 中定义了一个 `sources` 数组来存储所有音频文件的路径，以及一个 `index` 变量来记录当前播放的是哪个音频文件。在 `methods` 中定义了一个 `playNext` 方法，用于在监听到音频播放结束事件时切换到下一个音频文件并播放。在 `mounted` 生命周期钩子中，我们设置了第一个音频文件的路径，并调用 `play()` 方法开始播放。

这个示例代码中，只需要将所有音频文件的路径添加到 `sources` 数组中即可，Vue.js 代码会自动按顺序播放这些音频文件。