播放队列

src/pages/home/Index.jsx

@@ -6,7 +6,6 @@ import OperateScreen from '@pages/operateScreen/Index.jsx';
 import FingerprintJS from '@fingerprintjs/fingerprintjs';
 import { initSocket } from '@api/index.js';
 import { AntOutline, SetOutline } from 'antd-mobile-icons';
-import { Toast } from 'antd-mobile';
 
 // // 安卓相关处理
 
@@ -31,6 +30,7 @@ class Home extends React.Component {
       audioSrc: '', // 音频路径
       deviceID: '',
       hosLogo: '',
+      voiceSrc: [],
       // 模拟数据
       tempList: [
         {
@@ -266,18 +266,45 @@ class Home extends React.Component {
         if (!data.path || !data.voiceFileName) {
           return;
         }
-        this.setState({
-          audioSrc: data.path + data.voiceFileName,
-        }, () => {
-          const domAudio = document.querySelector('#audio');
-          domAudio.playbackRate = 1;
-          domAudio.currentTime = 0;
-          domAudio.play();
-        });
+        this.initVoice(data.path + data.voiceFileName);
       }, 1000);
     };
-    // test();
+   // test();
   }
+  // 音频播放事件
+  initVoice = (src) => {
+    const { voiceSrc } = this.state;
+    voiceSrc.push(src);
+    this.setState({
+      voiceSrc,
+    }, () => {
+      if (voiceSrc.length == 1) {
+        playVioce(src);
+      }
+    });
+    const playVioce = (audioSrc) => {
+      this.setState({
+        audioSrc,
+      }, () => {
+        const domAudio = document.querySelector('#audio');
+        domAudio.playbackRate = 1;
+        domAudio.currentTime = 0;
+        domAudio.play();
+        domAudio.addEventListener('ended', () => {
+          const { voiceSrc } = this.state;
+          voiceSrc.splice(0, 1);
+          const newArr = voiceSrc;
+          this.setState({
+            voiceSrc: newArr,
+          }, () => {
+            if (newArr.length > 0) {
+              playVioce(newArr[0]);
+            }
+          });
+        });
+      });
+    };
+  };
   initDevice = async () => {
     //接收Android端身份证信息函数
     window.webGetDeviceId = (deviceId) => {
@@ -380,13 +407,7 @@ class Home extends React.Component {
         if (!data.path || !data.voiceFileName) {
           return;
         }
-        this.setState({
-          audioSrc: data.path + data.voiceFileName,
-        }, () => {
-          const domAudio = document.querySelector('#audio');
-          domAudio.currentTime = 0;
-          domAudio.play();
-        });
+        this.initVoice(data.path + data.voiceFileName);
       }
     });
   };