[feat][ai聊天][语音合成]

src/views/xjc-integratedmachine/common/ai/chat.vue

@@ -72,10 +72,10 @@
                     <el-button style="width:140px">退出</el-button>
                 </div>
                 <div class="control-button">
-                    <el-button style="width:140px" @click="startVoice">开始</el-button>
+                    <el-button style="width:140px" @click="iatStartVoice">开始</el-button>
                 </div>
                 <div class="control-button">
-                    <el-button style="width:140px" @click="closeVoiceOpen">结束</el-button>
+                    <el-button style="width:140px" @click="iatCloseVoiceOpen">结束</el-button>
                 </div>
                 <div class="control-button">
                     <el-button style="width:140px" @click="stopMessage">停止回答</el-button>
@@ -98,6 +98,7 @@
     // 语音识别
     import CryptoJS from 'crypto-js';
     import * as RecorderManager from "/public/ai/iat/dist/index.umd.js"
+    // 语音播放
     import * as AudioPlayer from "/public/ai/tts/dist/index.umd.js"
 
     const loadingHistoryRecord = ref(false)
@@ -295,7 +296,7 @@
         iatRecorder = new window.RecorderManager('/ai/iat/dist');
         // 开始录音
         iatRecorder.onStart = () => {
-            changeBtnStatus('OPEN');
+            iatChangeBtnStatus('OPEN');
         };
         iatRecorder.onFrameRecorded = ({ isLastFrame, frameBuffer }) => {
             if (iatWS.readyState === iatWS.OPEN) {
@@ -310,7 +311,7 @@
                     }),
                 );
                 if (isLastFrame) {
-                    changeBtnStatus('CLOSING');
+                    iatChangeBtnStatus('CLOSING');
                 }
             }
         };
@@ -322,15 +323,15 @@
 
     }
 
-    async function startVoice() {
+    async function iatStartVoice() {
         if (iatLoading) {
             return;
         }
         iatVoiceOpen = true;
-        await playIatVoice();
+        await iatPlayIatVoice();
     }
 
-    async function playIatVoice() {
+    async function iatPlayIatVoice() {
         if (iatLoading) {
             return;
         }
@@ -345,7 +346,7 @@
             return;
         }
         if (iatStartVoiceStatus) {
-            connectWebSocket();
+            iatConnectWebSocket();
         } else {
             iatRecorder.stop();
         }
@@ -354,7 +355,7 @@
     /**
      * 关闭录音弹窗
      */
-    function closeVoiceOpen() {
+    function iatCloseVoiceOpen() {
         iatVoiceOpen = false;
         iatStartVoiceStatus = false;
         if (iatRecorder) {
@@ -366,7 +367,7 @@
         iatTranscription = '';
     }
 
-    function renderResult(resultData) {
+    function iatRenderResult(resultData) {
         // 识别结束
         const jsonData = JSON.parse(resultData);
         if (jsonData.data && jsonData.data.result) {
@@ -399,8 +400,8 @@
         }
     }
 
-    function connectWebSocket() {
-        const websocketUrl = getWebSocketUrl();
+    function iatConnectWebSocket() {
+        const websocketUrl = iatGetWebSocketUrl();
         if ('WebSocket' in window) {
             iatWS = new window.WebSocket(websocketUrl);
         } else if ('MozWebSocket' in window) {
@@ -409,7 +410,7 @@
             message.error('浏览器不支持WebSocket');
             return;
         }
-        changeBtnStatus('CONNECTING');
+        iatChangeBtnStatus('CONNECTING');
         iatWS.onopen = e => {
             console.log('iatWS.onopen', e);
             // 开始录音
@@ -439,21 +440,21 @@
             iatWS.send(JSON.stringify(params));
         };
         iatWS.onmessage = e => {
-            renderResult(e.data);
+            iatRenderResult(e.data);
         };
         iatWS.onerror = e => {
             console.error(e);
             iatRecorder.stop();
-            changeBtnStatus('CLOSED');
+            iatChangeBtnStatus('CLOSED');
         };
         iatWS.onclose = e => {
             console.log(e);
             iatRecorder.stop();
-            changeBtnStatus('CLOSED');
+            iatChangeBtnStatus('CLOSED');
         };
     }
 
-    function getWebSocketUrl() {
+    function iatGetWebSocketUrl() {
         const { APIKey, APISecret } = xfIatKeys;
         if (!APIKey) {
             message.error('语音识别配置未生效');
@@ -476,7 +477,7 @@
         return url;
     }
 
-    function countdown() {
+    function iatCountdown() {
         let seconds = 60;
         console.log(`录音中（${seconds}s）`);
         iatCountdownInterval = setInterval(() => {
@@ -490,7 +491,7 @@
         }, 1000);
     }
 
-    function changeBtnStatus(status) {
+    function iatChangeBtnStatus(status) {
         iatBtnStatus = status;
         if (status === 'CONNECTING') {
             console.log('建立连接中');
@@ -498,7 +499,7 @@
             iatResultTextTemp = '';
         } else if (status === 'OPEN') {
             if (iatRecorder) {
-                countdown();
+                iatCountdown();
             }
         } else if (status === 'CLOSING') {
             console.log('关闭连接中');
@@ -517,18 +518,36 @@
         return window.btoa(binary);
     }
 
-    // 发送消息
-    function sendMsg(text) {
-        // $emit('sendMsg', text);
-        // transcription = '';
-    }
     /* 语音识别 ↑*/
 
     /*语音合成 ↓*/
 
 
-    function initSpeechsynthesis(){
+    function initSpeechSynthesis(){
+        // 初始化语音播放
+        const audioPlayer = new AudioPlayer("/ai/tts/dist");
+        // 开始播放
+        audioPlayer.onPlay = () => {
+            changeBtnStatus("PLAY");
+        };
+        audioPlayer.onStop = (audioDatas) => {
+            console.log('=======>',audioDatas);
+            btnStatus === "PLAY" && changeBtnStatus("STOP");
+        };
+    }
 
+    let btnStatus = "UNDEFINED"; // "UNDEFINED" "CONNECTING" "PLAY" "STOP"
+    function changeBtnStatus(status) {
+        btnStatus = status;
+        if (status === "UNDEFINED") {
+            console.log("立即合成");
+        } else if (status === "CONNECTING") {
+            console.log("正在合成");
+        } else if (status === "PLAY") {
+            console.log("停止播放");
+        } else if (status === "STOP") {
+            console.log("重新播放");
+        }
     }
 
     /*语音合成 ↑*/
@@ -543,7 +562,7 @@
     onMounted(()=>{
         nextTick(()=>{
             initSpeechRecognition();
-            initSpeechsynthesis();
+            initSpeechSynthesis();
             list();
         })