更新

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

@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, reactive, ref } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { NDropdown, useMessage } from 'naive-ui'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
@@ -92,18 +92,18 @@ async function handleCopy() {
   }
 }
 
-let playIndex = 0;
-let playing = false;
+let playing = 0
 async function radioPlay() {
   console.log('播放', props.mp3)
-	const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts');
+  audioElements = []
+  const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts')
 
-	const promise = () => {
+  const promise = () => {
     return new Promise((resolve, reject) => {
       // 监听WebSocket连接打开事件
       socket.onopen = () => {
         console.log('socket已连接')
-				playIndex = 0;
+        playing = 0
         resolve(null)
       }
     })
@@ -116,21 +116,23 @@ async function radioPlay() {
     console.log('连接已关闭: ', event)
   }
 
-	socket.send(JSON.stringify( {
-     "data": "快科技10月12日消息。不宣而发的华为Mate 60在上架官方商城后。直到现在都处于一机难求的状态。由于Mate 60系列的爆火。华为也是将明年的预计手机出货量翻倍到了7000万台。"
-	}))
-
+  socket.send(JSON.stringify({
+    data: '快。科。技0月12。日消息。不宣而发的。华为Mate 60在上架官方商城后。直到现在都处于一机难求的状态。由于Mate 60系列的爆火。华为也是将明年的预计手机出货量翻倍到了7000万台。',
+  }))
+  let i = 0
 	 // 监听WebSocket接收消息事件
 	 socket.onmessage = (event: any) => {
-        const msg = JSON.parse(event.data);
-				console.log(msg.mp3);
-				const a = new Audio(msg.mp3)
+    const msg = JSON.parse(event.data)
+    console.log(i, msg.mp3)
+    const a = new Audio(msg.mp3)
 			  a.addEventListener('ended', () => {
-			    onAudioEnd(playIndex)
+			    onAudioEnd()
 			  })
 			  audioElements.push(a)
-				if(playIndex==0||playing==false) playAudio(playIndex)
-    }
+    if (i == 0)
+      playAudio(i)
+    i++
+  }
 
   // for (let i = 0; i < props.mp3.length; i++) {
   //   const a = new Audio(props.mp3[i])
@@ -143,22 +145,29 @@ async function radioPlay() {
   // playAudio()
 }
 
+let playFlag = false
 const onAudioEnd = (index: any) => {
-  if (index + 1 < audioElements.length&&playing==false){
-		audioElements[index + 1].play()
-		playing = true;
-	}else if(index + 1 < audioElements.length&&playing==true){
-		playing = true;
-	}else playing = false;
+  console.log('ok', playing)
+  playing++
+  playFlag = false
+  if (playing < audioElements.length) {
+    playFlag = true
+    audioElements[playing].play()
+  }
 }
 // 创建音频对象的数组
 const audioElements = reactive([])
 // 播放音频
-const playAudio = (playIndex:any) => {
+const playAudio = (playIndex: any) => {
   // for (let i = 0; i < audioElements.length; i++)
-  audioElements[playIndex].play()
+  audioElements[0].play()
 }
 
+watch(() => audioElements.length, (newVal, oldVal) => {
+  if (newVal > playing && playFlag == false && newVal > 0)
+    audioElements[playing].play()
+})
+
 // 暂停音频
 const pauseAudio = () => {
   for (let i = 0; i < audioElements.length; i++)
@@ -203,6 +212,14 @@ const pauseAudio = () => {
             播放
             <!-- <SvgIcon icon="ri:restart-line" /> -->
           </button>
+          <button
+            v-if="!inversion"
+            class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
+            @click="pauseAudio"
+          >
+            暂停
+            <!-- <SvgIcon icon="ri:restart-line" /> -->
+          </button>
           <button
             v-if="!inversion"
             class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
@@ -211,7 +228,7 @@ const pauseAudio = () => {
             <SvgIcon icon="ri:restart-line" />
           </button>
           <NDropdown
-					v-if="!inversion"
+            v-if="!inversion"
             :trigger="isMobile ? 'click' : 'hover'"
             :placement="!inversion ? 'right' : 'left'"
             :options="options"