From bf91579b4e4ed892a4e0db2a4d79141d625b3d9d Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <80892890+shaohuzhang1@users.noreply.github.com>
Date: Fri, 28 Mar 2025 18:24:00 +0800
Subject: [PATCH] fix: Fix some phones unable to play audio (#2728)

---
 .../operation-button/ChatOperationButton.vue  | 50 +++++++++----------
 ui/src/components/ai-chat/index.vue           |  5 +-
 2 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue b/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
index c28c21639..b3c55dae8 100644
--- a/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
+++ b/ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
@@ -94,15 +94,6 @@
           </el-button>
         </el-tooltip>
       </span>
-
-      <!-- 先渲染，不然不能播放   -->
-      <audio
-        ref="audioPlayer"
-        v-for="item in audioList"
-        :key="item"
-        controls
-        hidden="hidden"
-      ></audio>
       <div ref="audioCiontainer"></div>
     </div>
   </div>
@@ -293,7 +284,7 @@ class AudioManage {
       index = this.textList.length - 1
       if (this.ttsType === 'TTS') {
         const audioElement: HTMLAudioElement = document.createElement('audio')
-        audioElement.controls = true
+        audioElement.controls = false
         audioElement.hidden = true
         /**
          * 播放结束事件
@@ -436,7 +427,21 @@ class AudioManage {
     }
 
     const audioElement = this.audioList[index]
-    if (audioElement instanceof SpeechSynthesisUtterance) {
+
+    if (audioElement instanceof HTMLAudioElement) {
+      // 标签朗读
+      try {
+        this.statusList[index] = AudioStatus.PLAY_INT
+        const play = audioElement.play()
+        if (play instanceof Promise) {
+          play.catch((e) => {
+            this.statusList[index] = AudioStatus.READY
+          })
+        }
+      } catch (e: any) {
+        this.statusList[index] = AudioStatus.ERROR
+      }
+    } else {
       if (window.speechSynthesis.paused) {
         window.speechSynthesis.resume()
       } else {
@@ -446,14 +451,6 @@ class AudioManage {
         speechSynthesis.speak(audioElement)
         this.statusList[index] = AudioStatus.PLAY_INT
       }
-    } else {
-      // 标签朗读
-      try {
-        audioElement.play()
-        this.statusList[index] = AudioStatus.PLAY_INT
-      } catch (e) {
-        this.statusList[index] = AudioStatus.ERROR
-      }
     }
   }
   pause(self?: boolean) {
@@ -462,7 +459,14 @@ class AudioManage {
       return
     }
     const audioElement = this.audioList[index]
-    if (audioElement instanceof SpeechSynthesisUtterance) {
+
+    if (audioElement instanceof HTMLAudioElement) {
+      if (this.statusList[index] === AudioStatus.PLAY_INT) {
+        // 标签朗读
+        this.statusList[index] = AudioStatus.READY
+        audioElement.pause()
+      }
+    } else {
       this.statusList[index] = AudioStatus.READY
       if (self) {
         window.speechSynthesis.pause()
@@ -474,12 +478,6 @@ class AudioManage {
       } else {
         window.speechSynthesis.cancel()
       }
-    } else {
-      if (this.statusList[index] === AudioStatus.PLAY_INT) {
-        // 标签朗读
-        this.statusList[index] = AudioStatus.READY
-        audioElement.pause()
-      }
     }
   }
   getTextList(text: string, is_end: boolean) {
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index 7e45c6a3c..099bb77d4 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -523,7 +523,10 @@ onMounted(() => {
     let userFormData = JSON.parse(localStorage.getItem(`${accessToken}userForm`) || '{}')
     form_data.value = userFormData
   }
-  window.speechSynthesis.cancel()
+  if (window.speechSynthesis) {
+    window.speechSynthesis.cancel()
+  }
+
   window.sendMessage = sendMessage
   bus.on('on:transcribing', (status: boolean) => {
     transcribing.value = status