更新

src/views/chat/components/Message/index.vue

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, ref, reactive } from 'vue'
+import { computed, reactive, ref } from 'vue'
 import { NDropdown, useMessage } from 'naive-ui'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
@@ -93,29 +93,36 @@ async function handleCopy() {
 }
 
 function radioPlay() {
-	console.log('播放', props.mp3);
-	for (let i = 0; i < props.mp3.value.length; i++) {
-        audioElements.push(new Audio(props.mp3.value[i]));
+  console.log('播放', props.mp3)
+  for (let i = 0; i < props.mp3.length; i++) {
+    const a = new Audio(props.mp3[i])
+    a.addEventListener('ended', () => {
+      onAudioEnd(i)
+    })
+    audioElements.push(a)
   }
+
   playAudio()
 }
 
+const onAudioEnd = (index: any) => {
+  if (index + 1 < audioElements.length)
+    audioElements[index + 1].play()
+}
+
 // 创建音频对象的数组
-const audioElements = reactive([]);
+const audioElements = reactive([])
 // 播放音频
 const playAudio = () => {
-      for (let i = 0; i < audioElements.length; i++) {
-        audioElements[i].play();
+  // for (let i = 0; i < audioElements.length; i++)
+  audioElements[0].play()
 }
-    };
 
 // 暂停音频
 const pauseAudio = () => {
-      for (let i = 0; i < audioElements.length; i++) {
-        audioElements[i].pause();
+  for (let i = 0; i < audioElements.length; i++)
+    audioElements[i].pause()
 }
-    };
-
 </script>
 
 <template>