vue实现音频随机播放并且判断该音频什么时候播放完

你好，针对你的问题，我可以给出以下的答案：

1. 随机播放音频

要实现随机播放音频，首先需要将音频列表打乱，可以使用 JavaScript 中的 shuffle 函数，将音频列表打乱。然后使用 Vue 的 v-for 指令循环渲染音频列表，点击播放按钮时，将当前音频的索引传给 playAudio 函数，该函数会根据索引播放对应的音频。

以下是示例代码：

<template>
  <div>
    <audio ref="audio" :src="audioList[currentIndex]" @ended="playNext"></audio>
    <ul>
      <li v-for="(audio, index) in shuffledList" :key="index">
        <button @click="playAudio(index)">播放</button>
        {{ audio }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      audioList: ['audio1.mp3', 'audio2.mp3', 'audio3.mp3'],
      currentIndex: 0
    };
  },
  computed: {
    shuffledList() {
      return this.audioList.slice().sort(() => Math.random() - 0.5);
    }
  },
  methods: {
    playAudio(index) {
      this.currentIndex = index;
      this.$refs.audio.play();
    },
    playNext() {
      this.currentIndex = (this.currentIndex + 1) % this.audioList.length;
      this.$refs.audio.src = this.audioList[this.currentIndex];
      this.$refs.audio.play();
    }
  }
};
</script>

2. 判断音频播放完毕

要判断音频播放完毕，可以监听 `ended` 事件，该事件会在音频播放结束时触发。在示例代码中，我使用了 `@ended="playNext"` 监听音频播放结束事件，并调用 `playNext` 函数播放下一首音频。

希望我的回答能够帮到你！