处理微信和ios 安卓上audio播放音乐的后台关闭和播放问题

186 阅读1分钟

步骤1.注释html

image.png 步骤2. js创建audio标签,设置属性

 // 下面是处理ios播放的bug
   var audio_thisData=''
                    audio_thisData = document.createElement("audio");  
                    audio_thisData.src = 'static/music.mp3'; 
                      if (/iphone/i.test(navigator.userAgent)) {
                        audio_thisData.loop="loop"   //循环播放
                      }

              audio_thisData.play();  
                    // 解决ios audio无法自动播放、循环播放的问题
                    var state = 0;
                    document.addEventListener('touchstart', function(){
                        if(state==0){
                            audio_thisData.play();
                            state=1;
                        }
                    }, false);
                    document.addEventListener("WeixinJSBridgeReady", function () {
                        audio_thisData.play();
                    }, false);`
                    //循环播放
                    audio_thisData.onended = function () {
                        audio_thisData.load();
                        audio_thisData.play();
                    }

image.png

步骤3.点击关闭音乐播放

image.png

      步骤4.处理在微信app打开能播放,是在script中,在vue的区域外面,试试能不能移动到mounted生命周期里面
      

image.png

 var ua = navigator.userAgent.toLowerCase()
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                var audiodcv = document.getElementById('musicfx');
                     audiodcv.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audiodcv.play();
                }, false);
            }
            audioAutoPlay();
        });
    }

步骤5: 生命周期销毁播放暂停音乐,处理后台关闭音乐播放的问题

image.png

  destroyed() {
            audio_thisData.pause();
        },