更新

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

@@ -91,12 +91,14 @@ async function handleCopy() {
     message.error('复制失败')
   }
 }
-
+const playStatus = ref('end')
 let playing = 0
+let sok = false
 async function radioPlay() {
   console.log('播放', props.mp3)
-  audioElements = []
+  audioElements.length = 0
   const socket = new WebSocket('wss://chat.lihaink.cn/zhanti/tts')
+  sok = true
 
   const promise = () => {
     return new Promise((resolve, reject) => {
@@ -111,14 +113,21 @@ async function radioPlay() {
 
   await promise()
 
+  socket.onerror = (event: any) => { sok = false; console.log('连接错误事件: ', event) }
+
   // 监听WebSocket关闭事件
   socket.onclose = (event: any) => {
     console.log('连接已关闭: ', event)
+    sok = false
   }
 
+  // socket.send(JSON.stringify({
+  //   data: '快。科。技0月12。日消息。不宣而发的。华为Mate 60在上架官方商城后。直到现在都处于一机难求的状态。由于Mate 60系列的爆火。华为也是将明年的预计手机出货量翻倍到了7000万台。',
+  // }))
   socket.send(JSON.stringify({
-    data: '快。科。技0月12。日消息。不宣而发的。华为Mate 60在上架官方商城后。直到现在都处于一机难求的状态。由于Mate 60系列的爆火。华为也是将明年的预计手机出货量翻倍到了7000万台。',
+    data: props.text,
   }))
+  playStatus.value = 'playing'
   let i = 0
 	 // 监听WebSocket接收消息事件
 	 socket.onmessage = (event: any) => {
@@ -154,6 +163,7 @@ const onAudioEnd = (index: any) => {
     playFlag = true
     audioElements[playing].play()
   }
+  else { playStatus.value = 'end' }
 }
 // 创建音频对象的数组
 const audioElements = reactive([])
@@ -164,15 +174,27 @@ const playAudio = (playIndex: any) => {
 }
 
 watch(() => audioElements.length, (newVal, oldVal) => {
-  if (newVal > playing && playFlag == false && newVal > 0)
+  if (playStatus.value == 'pause')
+    return
+  if (newVal > playing && playFlag == false && newVal > 0) {
     audioElements[playing].play()
+    playStatus.value = 'playing'
+  }
 })
 
+let pauseIndex = -1
 // 暂停音频
 const pauseAudio = () => {
+  pauseIndex = playing + 0
+  playStatus.value = 'pause'
   for (let i = 0; i < audioElements.length; i++)
     audioElements[i].pause()
 }
+const noPauseAudio = () => {
+  playStatus.value = 'playing'
+  audioElements[pauseIndex].play()
+  pauseIndex = -1
+}
 </script>
 
 <template>
@@ -205,7 +227,7 @@ const pauseAudio = () => {
         />
         <div class="flex-col btn">
           <button
-            v-if="!inversion"
+            v-if="!inversion && sok == false && playStatus == 'end'"
             class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
             @click="radioPlay"
           >
@@ -213,7 +235,8 @@ const pauseAudio = () => {
             <!-- <SvgIcon icon="ri:restart-line" /> -->
           </button>
           <button
-            v-if="!inversion"
+
+            v-if="!inversion && playStatus == 'playing'"
             class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
             @click="pauseAudio"
           >
@@ -221,12 +244,20 @@ const pauseAudio = () => {
             <!-- <SvgIcon icon="ri:restart-line" /> -->
           </button>
           <button
+            v-if="!inversion && playStatus == 'pause'"
+            class="mr-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
+            @click="noPauseAudio"
+          >
+            继续
+            <!-- <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="handleRegenerate"
           >
             <SvgIcon icon="ri:restart-line" />
-          </button>
+          </button> -->
           <NDropdown
             v-if="!inversion"
             :trigger="isMobile ? 'click' : 'hover'"