fix: 修复对话日志里的语音不能播放的问题

--bug=1046835 --user=刘瑞斌【应用】应用对话日志中，点击播放按钮没有反应 https://www.tapd.cn/57709429/s/1582747
1Panel-dev · Sep 20, 2024 · 35f7572 · 35f7572
1 parent 281df5b
commit 35f7572
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/ui/src/components/ai-chat/LogOperationButton.vue b/ui/src/components/ai-chat/LogOperationButton.vue
@@ -8,9 +8,12 @@
     <!-- 语音播放 -->
     <span v-if="tts">
       <el-tooltip effect="dark" content="语音播放" placement="top">
-        <el-button text @click="playAnswerText(data?.answer_text)">
+        <el-button v-if="!audioPlayerStatus" text @click="playAnswerText(data?.answer_text)">
           <AppIcon iconName="app-video-play"></AppIcon>
         </el-button>
+        <el-button v-else text @click="pausePlayAnswerText()">
+          <el-icon ><VideoPause /></el-icon>
+        </el-button>
       </el-tooltip>
       <el-divider direction="vertical" />
     </span>
@@ -58,6 +61,13 @@ import EditContentDialog from '@/views/log/component/EditContentDialog.vue'
 import EditMarkDialog from '@/views/log/component/EditMarkDialog.vue'
 import { datetimeFormat } from '@/utils/time'
 import applicationApi from '@/api/application'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const {
+  params: { id },
+} = route as any
+
 
 const props = defineProps({
   data: {
@@ -68,7 +78,8 @@ const props = defineProps({
     type: String,
     default: ''
   },
-  tts: Boolean
+  tts: Boolean,
+  tts_type: String
 })
 
 const emit = defineEmits(['update:data'])
@@ -89,16 +100,25 @@ function editMark(data: any) {
   EditMarkDialogRef.value.open(data)
 }
 
+const audioPlayerStatus = ref(false)
+
 const playAnswerText = (text: string) => {
-  if (props.data.tts_type === 'BROWSER') {
+  console.log(props.data)
+  if (props.tts_type === 'BROWSER') {
     // 创建一个新的 SpeechSynthesisUtterance 实例
     const utterance = new SpeechSynthesisUtterance(text)
     // 调用浏览器的朗读功能
     window.speechSynthesis.speak(utterance)
   }
-  if (props.data.tts_type === 'TTS') {
+  if (props.tts_type === 'TTS') {
+    audioPlayerStatus.value = true
+    // 恢复上次暂停的播放
+    if (audioPlayer.value?.src) {
+      audioPlayer.value?.play()
+      return
+    }
     applicationApi
-      .postTextToSpeech(props.data.id as string, { text: text }, loading)
+      .postTextToSpeech(id || props.applicationId as string, { text: text }, loading)
       .then((res: any) => {
         // 假设我们有一个 MP3 文件的字节数组
         // 创建 Blob 对象
@@ -117,6 +137,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')
         }
@@ -127,6 +150,13 @@ const playAnswerText = (text: string) => {
   }
 }
 
+const pausePlayAnswerText = () => {
+  if (props.tts_type === 'TTS') {
+    audioPlayerStatus.value = false
+    audioPlayer.value?.pause()
+  }
+}
+
 function refreshMark() {
   buttonData.value.improve_paragraph_id_list = []
   emit('update:data', buttonData.value)

diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
@@ -131,6 +131,7 @@
                   v-model:data="chatList[index]"
                   :applicationId="appId"
                   :tts="props.data.tts_model_enable"
+                  :tts_type="props.data.tts_type"
                 />
               </div>