更新

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'
@@ -12,7 +12,7 @@ import { copyToClip } from '@/utils/copy'
 interface Props {
   dateTime?: string
   text?: string
-	mp3?: Array<any>
+  mp3?: Array<any>
   inversion?: boolean
   error?: boolean
   loading?: boolean
@@ -92,30 +92,37 @@ 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]));
-      }
-			playAudio()
+function radioPlay() {
+  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 playAudio = () => {
-      for (let i = 0; i < audioElements.length; i++) {
-        audioElements[i].play();
-      }
-    };
-
-    // 暂停音频
-    const pauseAudio = () => {
-      for (let i = 0; i < audioElements.length; i++) {
-        audioElements[i].pause();
-      }
-    };
+const audioElements = reactive([])
+// 播放音频
+const playAudio = () => {
+  // for (let i = 0; i < audioElements.length; i++)
+  audioElements[0].play()
+}
 
+// 暂停音频
+const pauseAudio = () => {
+  for (let i = 0; i < audioElements.length; i++)
+    audioElements[i].pause()
+}
 </script>
 
 <template>
@@ -154,12 +161,12 @@ const audioElements = reactive([]);
           >
             <SvgIcon icon="ri:restart-line" />
           </button>
-					<button
+          <button
             v-if="!inversion"
             class="mb-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
             @click="radioPlay"
           >
-						播放
+            播放
             <!-- <SvgIcon icon="ri:restart-line" /> -->
           </button>
           <NDropdown