音频使用原生

package.json

@@ -12,10 +12,8 @@
     "@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/components/login/Index.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Input, Form, Modal, Selector, Toast } from 'antd-mobile';
 const formRef = React.createRef();
-import audioSrc from './../../assets/mp3.wav';
 /**
  * @刘丹: 登录公用
  */
@@ -235,8 +234,6 @@ class Login extends React.Component {
             </Form.Item>
           </>}
           </Form>
-          <audio controls src={audioSrc}></audio>
-          <video controls src={audioSrc}></video>
         </>}
       >
       </Modal>

src/pages/home/Index.jsx

@@ -7,7 +7,6 @@ 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';
 // // 安卓相关处理
 import audioSrc from './../../assets/mp3.wav';
 
@@ -238,6 +237,7 @@ class Home extends React.Component {
   }
   componentDidMount() {
     this.initDevice();
+    this.initAndroidVoice();
     const test = () => {
       var start = 0;
       setInterval(() => {
@@ -272,45 +272,32 @@ class Home extends React.Component {
     };
     //test();
   }
-  soundPaly2(src) {
-    if (src || this.state.voiceList.length > 0) {
+  initAndroidVoice() {
+    window.mediaPlayOver = (flag) => {
+      if (flag == 'success') {
+        this.state.voiceList.splice(0, 1);
+        this.setState({
+          voiceList: this.state.voiceList,
+        }, () => {
+          this.soundPaly();
+        });
+      }
+    };
+  }
+  soundPaly() {
+    if (this.state.voiceList.length > 0) {
       this.setState({
         myStatus: true,
-      });
-      const sound = new Howl({
-        loop: false,
-        preload: true,
-        src: [src || this.state.voiceList[0]],// this.state.voiceList[0] audioSrc
-        html5: false, // 适用于跨域或流媒体
-        format: ['mp3', 'wav', 'wma', 'mpa', 'ram', 'ra', 'aac', 'aif', 'm4a'],
-        onload: () => {
-          console.log('音频加载成功');
-          Toast.show({
-            duration: 3000,
-            content: '音频加载成功',
-          });
-        },
-        onloaderror: (id, error) => console.error('加载失败', error),
-        onend: () => {
-          Toast.show({
-            duration: 10000,
-            content: '播放完成',
-          });
-          sound.unload();
-          sound.currentTime = 0;
-          this.state.voiceList.splice(0, 1);
-          this.setState({
-            voiceList: this.state.voiceList,
-          }, () => {
-            this.soundPaly2();
-          });
+      }, () => {
+        const ua = navigator.userAgent.toLowerCase();
+        if (/android/.test(ua)) {
+          window.JavaClientCall && window.JavaClientCall.mediaFilePlay(this.state.voiceList[0]);
         }
       });
-      sound.mute(true);
-      sound.play();
-      sound.mute(false);
     } else {
-      this.setState({ myStatus: false });
+      this.setState({
+        myStatus: false
+      });
     }
   }
   // 音频播放事件
@@ -472,7 +459,7 @@ class Home extends React.Component {
           voiceList: this.state.voiceList,
         }, () => {
           if (!this.state.myStatus) {
-            this.soundPaly2();
+            this.soundPaly();
           }
         });
         // this.initVoice(data.path + data.voiceFileName);