更换插件

package.json

@@ -12,8 +12,10 @@
     "@fingerprintjs/fingerprintjs": "^4.6.1",
     "antd-mobile": "^5.38.1",
     "antd-mobile-icons": "^0.3.0",
+    "audio.js": "^1.1.3",
     "babel-polyfill": "^6.26.0",
     "core-js": "^3.40.0",
+    "howler": "^2.2.4",
     "qrcode": "^1.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/pages/home/Index.jsx

@@ -7,6 +7,7 @@ import FingerprintJS from '@fingerprintjs/fingerprintjs';
 import { initSocket } from '@api/index.js';
 import { AntOutline, SetOutline } from 'antd-mobile-icons';
 import { Toast } from 'antd-mobile';
+import { Howl } from 'howler';
 // // 安卓相关处理
 
 window.webGetDeviceId = function (callback) {
@@ -31,6 +32,8 @@ class Home extends React.Component {
       hosLogo: '',
       voiceSrc: [],
       isPlay: false,
+      voiceList: [],
+      myStatus: false,
       // 模拟数据
       tempList: [
         {
@@ -268,6 +271,41 @@ class Home extends React.Component {
     };
     //test();
   }
+  soundPaly2() {
+    if (this.state.voiceList.length > 0) {
+      this.setState({
+        myStatus: true,
+      });
+      const sound = new Howl({
+        loop: true,
+				preload: true,
+        src: [this.state.voiceList[0]],
+        html5: false, // 适用于跨域或流媒体
+        format: ['mp3', 'wav', 'wma', 'mpa', 'ram', 'ra', 'aac', 'aif', 'm4a'],
+        onload: () => {
+          console.log('音频加载成功');
+          sound.play(); // 播放
+        },
+        onloaderror: (id, error) => console.error('加载失败', error),
+        onend: () => {
+          Toast.show({
+            duration: 10000,
+            content: '播放完成',
+          });
+          this.state.voiceList.splice(0, 1);
+          this.setState({
+            voiceList: this.state.voiceList,
+          }, () => {
+            this.soundPaly2();
+          });
+        }
+      });
+      console.log(this.state.voiceList[0]);
+      sound.play();
+    } else {
+      this.setState({ myStatus: false });
+    }
+  }
   // 音频播放事件
   initVoice = (src) => {
     const { voiceSrc } = this.state;
@@ -395,7 +433,7 @@ class Home extends React.Component {
     }
     obj.deviceID = this.state.deviceID;
     initSocket(obj, (data) => {
-      console.log('Room接收消息：',data );
+      // console.log('Room接收消息：',data );
       data = JSON.parse(data);
       if (data.callMsg) {
         const patList = [...data.callMsg.callPat, ...data.callMsg.waitPat.map(v => {
@@ -422,7 +460,16 @@ class Home extends React.Component {
         if (!data.path || !data.voiceFileName) {
           return;
         }
-        this.initVoice(data.path + data.voiceFileName);
+        this.state.voiceList.push(data.path + data.voiceFileName);
+        console.log(data);
+        this.setState({
+          voiceList: this.state.voiceList,
+        }, () => {
+          if (!this.state.myStatus) {
+            this.soundPaly2();
+          }
+        });
+        // this.initVoice(data.path + data.voiceFileName);
       }
     });
   };