From dc71d55d498cefdc0c36afa1ba97a7241963aaf1 Mon Sep 17 00:00:00 2001
From: CaptainB <bin@fit2cloud.com>
Date: Thu, 19 Sep 2024 17:53:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DTTS=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E8=AF=AD=E9=9F=B3=E4=B8=8D=E8=83=BD=E6=9A=82=E5=81=9C=E7=9A=84?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1046734 --user=刘瑞斌 【应用】选择语音输出模型，无法暂停播放 https://www.tapd.cn/57709429/s/1581642
---
 ui/src/components/ai-chat/OperationButton.vue | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/ai-chat/OperationButton.vue b/ui/src/components/ai-chat/OperationButton.vue
index dc8cb367d..08b48a409 100644
--- a/ui/src/components/ai-chat/OperationButton.vue
+++ b/ui/src/components/ai-chat/OperationButton.vue
@@ -8,8 +8,11 @@
     <!-- 语音播放 -->
     <span v-if="tts">
       <el-tooltip effect="dark" content="语音播放" placement="top">
-        <el-button text :disabled="!data?.write_ed" @click="playAnswerText(data?.answer_text)">
-          <AppIcon iconName="app-video-play"></AppIcon>
+        <el-button v-if="!audioPlayerStatus" text :disabled="!data?.write_ed" @click="playAnswerText(data?.answer_text)">
+          <AppIcon iconName="app-video-play" ></AppIcon>
+        </el-button>
+        <el-button v-else text :disabled="!data?.write_ed" @click="pausePlayAnswerText()">
+          <el-icon ><VideoPause /></el-icon>
         </el-button>
       </el-tooltip>
       <el-divider direction="vertical" />
@@ -102,6 +105,7 @@ const props = defineProps({
 const emit = defineEmits(['update:data', 'regeneration'])
 
 const audioPlayer = ref<HTMLAudioElement | null>(null)
+const audioPlayerStatus = ref(false)
 const buttonData = ref(props.data)
 const loading = ref(false)
 
@@ -151,6 +155,12 @@ const playAnswerText = (text: string) => {
     window.speechSynthesis.speak(utterance)
   }
   if (props.tts_type === 'TTS') {
+    audioPlayerStatus.value = true
+    // 恢复上次暂停的播放
+    if (audioPlayer.value?.src) {
+      audioPlayer.value?.play()
+      return
+    }
     applicationApi
       .postTextToSpeech(props.applicationId as string, { text: text }, loading)
       .then((res: any) => {
@@ -171,6 +181,9 @@ const playAnswerText = (text: string) => {
         if (audioPlayer.value instanceof HTMLAudioElement) {
           audioPlayer.value.src = url
           audioPlayer.value.play() // 自动播放音频
+          audioPlayer.value.onended = () => {
+            audioPlayerStatus.value = false
+          }
         } else {
           console.error('audioPlayer.value is not an instance of HTMLAudioElement')
         }
@@ -180,5 +193,12 @@ const playAnswerText = (text: string) => {
       })
   }
 }
+
+const pausePlayAnswerText = () => {
+  if (props.tts_type === 'TTS') {
+    audioPlayerStatus.value = false
+    audioPlayer.value?.pause()
+  }
+}
 </script>
 <style lang="scss" scoped></style>