From 03014137798f2555692a0dd9f8d1183b95ac5a4c Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Thu, 12 Oct 2023 16:06:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/typings/chat.d.ts                       |  1 +
 src/views/chat/components/Message/index.vue | 36 ++++++++++++++++++++-
 src/views/chat/index.vue                    |  8 +++--
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/typings/chat.d.ts b/src/typings/chat.d.ts
index 0c8012e..18d8973 100644
--- a/src/typings/chat.d.ts
+++ b/src/typings/chat.d.ts
@@ -3,6 +3,7 @@ declare namespace Chat {
 	interface Chat {
 		dateTime: string
 		text: string
+		mp3: Array<any> | null
 		inversion?: boolean
 		error?: boolean
 		loading?: boolean
diff --git a/src/views/chat/components/Message/index.vue b/src/views/chat/components/Message/index.vue
index d08cb04..84618ef 100644
--- a/src/views/chat/components/Message/index.vue
+++ b/src/views/chat/components/Message/index.vue
@@ -1,5 +1,5 @@
 <script setup lang='ts'>
-import { computed, ref } from 'vue'
+import { computed, ref, reactive } from 'vue'
 import { NDropdown, useMessage } from 'naive-ui'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
@@ -12,6 +12,7 @@ import { copyToClip } from '@/utils/copy'
 interface Props {
   dateTime?: string
   text?: string
+	mp3?: Array<any>
   inversion?: boolean
   error?: boolean
   loading?: boolean
@@ -90,6 +91,31 @@ async function handleCopy() {
     message.error('复制失败')
   }
 }
+
+function radioPlay(){
+	console.log('播放', props.mp3);
+	for (let i = 0; i < props.mp3.value.length; i++) {
+        audioElements.push(new Audio(props.mp3.value[i]));
+      }
+			playAudio()
+}
+
+// 创建音频对象的数组
+const audioElements = reactive([]);
+ // 播放音频
+ const playAudio = () => {
+      for (let i = 0; i < audioElements.length; i++) {
+        audioElements[i].play();
+      }
+    };
+
+    // 暂停音频
+    const pauseAudio = () => {
+      for (let i = 0; i < audioElements.length; i++) {
+        audioElements[i].pause();
+      }
+    };
+
 </script>
 
 <template>
@@ -127,6 +153,14 @@ async function handleCopy() {
             @click="handleRegenerate"
           >
             <SvgIcon icon="ri:restart-line" />
+          </button>
+					<button
+            v-if="!inversion"
+            class="mb-2 transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-300"
+            @click="radioPlay"
+          >
+						播放
+            <!-- <SvgIcon icon="ri:restart-line" /> -->
           </button>
           <NDropdown
             :trigger="isMobile ? 'click' : 'hover'"
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index a73fd52..ad34cb2 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -169,11 +169,12 @@ async function onConversation() {
 
   try {
     let lastText = ''
+		let mp3: any = []
     console.log('发送消息', message)
 
     const fetchChatAPIOnce = async () => {
       socket.send(JSON.stringify({
-        tts: 0,
+        tts: 1,
         data: [
           {
             role: 'user',
@@ -187,13 +188,15 @@ async function onConversation() {
         const msg = JSON.parse(event.data)
         // console.log(`收到消息: `, msg.payload.choices.text[0].content);
         // console.log(`当前消息: `, dataSources.value[dataSources.value.length - 1].text);
-        lastText += msg.payload.choices.text[0].content
+        lastText += msg.payload.choices.text[0].content;
+				mp3.push(msg.payload.choices.mp3)
         updateChat(
           +uuid,
           dataSources.value.length - 1,
           {
             dateTime: new Date().toLocaleString(),
             text: lastText,
+						mp3: mp3,
             inversion: false,
             error: false,
             loading: true,
@@ -632,6 +635,7 @@ const click = () => {
                 :key="index"
                 :date-time="item.dateTime"
                 :text="item.text"
+								:mp3="item.mp3"
                 :inversion="item.inversion"
                 :error="item.error"
                 :loading="item.loading"