音频

src/components/login/Index.jsx

@@ -234,7 +234,6 @@ class Login extends React.Component {
             </Form.Item>
           </>}
           </Form>
-          <audio controls src='/mp3.wav'></audio>
         </>}
       >
       </Modal>

src/pages/home/Index.jsx

@@ -9,6 +9,7 @@ import { AntOutline, SetOutline } from 'antd-mobile-icons';
 import { Toast } from 'antd-mobile';
 import { Howl } from 'howler';
 // // 安卓相关处理
+import audioSrc from './../../assets/mp3.wav';
 
 window.webGetDeviceId = function (callback) {
   window.callback = callback;
@@ -269,22 +270,28 @@ class Home extends React.Component {
         this.initVoice('/mp3.wav');
       }, 2950);
     };
+    document.querySelector('#test').onclick = () => {
+      this.soundPaly2(audioSrc);
+    };
     //test();
   }
-  soundPaly2() {
-    if (this.state.voiceList.length > 0) {
+  soundPaly2(src) {
+    if (src || this.state.voiceList.length > 0) {
       this.setState({
         myStatus: true,
       });
       const sound = new Howl({
-        loop: true,
-				preload: true,
-        src: [this.state.voiceList[0]],
+        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('音频加载成功');
-          sound.play(); // 播放
+          Toast.show({
+            duration: 3000,
+            content: '音频加载成功',
+          });
         },
         onloaderror: (id, error) => console.error('加载失败', error),
         onend: () => {
@@ -292,6 +299,8 @@ class Home extends React.Component {
             duration: 10000,
             content: '播放完成',
           });
+          sound.unload();
+          sound.currentTime = 0;
           this.state.voiceList.splice(0, 1);
           this.setState({
             voiceList: this.state.voiceList,
@@ -300,8 +309,9 @@ class Home extends React.Component {
           });
         }
       });
-      console.log(this.state.voiceList[0]);
+      sound.mute(true);
       sound.play();
+      sound.mute(false);
     } else {
       this.setState({ myStatus: false });
     }
@@ -461,7 +471,6 @@ class Home extends React.Component {
           return;
         }
         this.state.voiceList.push(data.path + data.voiceFileName);
-        console.log(data);
         this.setState({
           voiceList: this.state.voiceList,
         }, () => {
@@ -562,6 +571,7 @@ class Home extends React.Component {
           onClick={this.openLogin}
           style={{color: this.state.colorName == 'dark-bg' ? '#fff' : '#0D2764', marginLeft: '10px'}}
         />
+        <button id="test"> 测 </button>
         </span>
         <audio controls id="audio"
           style={{ position: 'fixed', left: '-1000px', top: '100px' }}