feat: 对接音频播放

README.md

@@ -22,3 +22,8 @@ npm run lint
 
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
+
+###设置自动播放 
+```
+chrome://settings/content/sound
+```

public/webConfig.js

@@ -7,4 +7,8 @@ window.globalMQ = {
   MQTT_SERVICE: 'ws://192.168.2.104:15674/ws', // mqtt服务地址(https需要用wss协议)
   MQTT_USERNAME: 'admin', // mqtt连接用户名
   MQTT_PASSWORD: 'admin', //mqtt连接密码
-};
+};
+
+window.audioUrl = {
+  baseURL: 'http://192.168.2.104:9090',
+}

src/api/publishApi.js

@@ -1,28 +1,44 @@
-import _axios from '@/utils/_axios';
+import _axios from "@/utils/_axios";
+import axios from "axios";
 
 // 获取动态表格列头
-export const getDynamicTableHeader = data => {
+export const getDynamicTableHeader = (data) => {
   return _axios({
-    url: '/api/DoctorMicroservice/DictReportDataSource/QueryPageList',
+    url: "/api/DoctorMicroservice/DictReportDataSource/QueryPageList",
     params: data,
   });
 };
 
 // 获取动态表格数据
-export const getDynamicTableList = data => {
+export const getDynamicTableList = (data) => {
   return _axios({
-    method: 'post',
-    url: '/api/DoctorMicroservice/DictReportDataSource/GetHistoryAllData',
+    method: "post",
+    url: "/api/DoctorMicroservice/DictReportDataSource/GetHistoryAllData",
     data,
   });
 };
 
-
 // 获取全局变量
-export const getGlobeConfig = params => {
+export const getGlobeConfig = (params) => {
   return _axios({
-    method: 'get',
-    url: '/api/identity/configs/PageList',
+    method: "get",
+    url: "/api/identity/configs/PageList",
     params,
   });
 };
+
+// 获取音频数据
+export const getAudio = (data) => {
+  return axios.post(
+    `${window.audioUrl.baseURL}/synthesize`,
+    {
+      ...data,
+    },
+    {
+      headers: {
+        "Content-Type": "application/json",
+      },
+      responseType: "blob", 
+    }
+  );
+};

src/views/waitList/index.vue

@@ -92,11 +92,12 @@
         <p class="text-[2.59vh]">请勿吸烟，请照顾好自己随身携带的物品，请耐心等待，我们将竭诚为您服务</p>
       </div>
     </footer>
+    <audio ref="audioRef" class="invisible"></audio>
   </section>
 </template>
 
 <script>
-import { getDynamicTableHeader, getDynamicTableList, getGlobeConfig } from '@/api/publishApi';
+import { getDynamicTableHeader, getDynamicTableList, getGlobeConfig, getAudio } from '@/api/publishApi';
 import { Carousel, CarouselItem } from 'element-ui';
 import dayjs from 'dayjs';
 import { statusToTxt, textWaitToColor } from '@/utils/common';
@@ -244,8 +245,6 @@ export default {
             }
           }
           this.popupMsgList.push(data['msg']['notice'].replaceAll('，', ','));
-          this.popupMsgList.push(data['msg']['notice'].replaceAll('，', ','));
-          this.popupMsgList.push(data['msg']['notice'].replaceAll('，', ','));
         }
       } catch (e) {
         console.warn(e);
@@ -267,42 +266,32 @@ export default {
         this.popupMag = this.popupMsgList[0].replace(/[,，]/g, '').split('#');
         this.showPopup = true;
         this.playNum++;
+        getAudio({ text: this.popupMsgList[0].replaceAll("#", '') }).then(res => {
+          const blob = new Blob([res['data']], { type: "audio/wav" });
+          const audioUrl = URL.createObjectURL(blob);
 
-        if (this.synth) {
-          const utterance = new SpeechSynthesisUtterance(this.popupMsgList[0].replace(/#/g, ''));
-          utterance.rate = 0.6;
-          const voices = this.synth.getVoices();
-          const selectedVoice = voices.find(voice => voice.lang === 'zh-CN');
-          if (selectedVoice) {
-            utterance.voice = selectedVoice;
-          } else {
-            console.warn('voices not fount');
+          if (this.$refs.audioRef) {
+            this.$refs.audioRef.src = audioUrl
+            this.$refs.audioRef.play()
           }
 
-          // 添加 onend 事件处理器
-          utterance.onend = function () {
-            setTimeout(() => {
-              if (this.playNum >= 3) {
-                this.popupMag = [];
-                this.showPopup = false;
-                this.playNum = 0;
-              }
+          this.$refs.audioRef.onended = () => {
+            if (this.playNum < 3) {
+              this.playNum++;
+              setTimeout(() => {
+                this.$refs.audioRef.play()
+              }, 500);
+            } else {
+              this.popupMag = "";
+              this.showPopup = false;
+              this.playNum = 0;
               this.hasPlay = false;
               this.popupMsgList.shift();
-            }, 1000);
-          }.bind(this);
-
-          this.synth.speak(utterance);
-
-          // 等待语音列表加载完成
-          const checkVoices = () => {
-            if (this.synth.getVoices().length !== 0) {
-              clearInterval(voicesCheckInterval);
+              URL.revokeObjectURL(audioUrl)
+              this.$refs.audioRef.onended = null
             }
-          };
-
-          const voicesCheckInterval = setInterval(checkVoices, 100);
-        }
+          }
+        })
       }
     },
     desensitizationText(text) {
@@ -359,8 +348,6 @@ export default {
       });
       // setTimeout(() => {
       //   this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
-      //   this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
-      //   this.popupMsgList.push('请,金尧仙,的家属#到,手术室门口接病人');
       // }, 1000);
     });
   },