微信web H5 安卓无法播放的解决方案

发现问题：

H5页面在微信内置浏览器播放的时候会发现，部分安卓机型不在支持音乐自动播放，与视频一样，需要人为触发后才能使用。

为此，微信社区给出了答案：

Android微信内网页音频自动播放能力调整 | 微信开放社区

但甲方不愿意接受，这就很难受了，作为友军我们只能一边安慰，一边找解决方案。

分析问题：

出现这种情况，就要从代码源头去分析了，早期我们让手机自动播放，我们的代码如下：

引入微信js(jweixin)后：

wx.ready(function(){

    var globalAudio=document.getElementById("mp3");
     globalAudio.play();

})


function onBridgeReady() {
        WeixinJSBridge.call('hideOptionMenu');
    }

    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }

 这样就能实现音乐自动播放了，但不巧，这次情况又不一样了，好尴尬呢。

解决问题：

好在有度娘，可以搜索到解决方案，可以参考参考：

有一种方案叫做：web vedio api

更详细的可以查看：

Web Audio API - Web APIs | MDN

快上码~

  /**
     * @author ccbbs
     * @file 解决安卓webview自动播放背景音乐的问题
     */
    function BGMAutoPlayMgr/* solveAndroidBGMAutoplay */(url) {
        this.audioContext = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext)();
        this.sourceNode = null;
        this.buffer = null;
        this.isPlayingBGM = false;
        this.toggleBGM = function () {
            if (typeof this.sourceNode == 'object') {
                if (this.isPlayingBGM) {
                    this.sourceNode.stop();
                    this.isPlayingBGM = false;
                } else this._playSourceNode();
            }
        }
        this._playSourceNode = function () {
            const audioContext = this.audioContext;
            audioContext.resume();
            const _sourceNode = audioContext.createBufferSource();
            _sourceNode.buffer = this.buffer;
            _sourceNode.loop = true;
            _sourceNode.connect(audioContext.destination);
            _sourceNode.start(0);
            this.sourceNode = _sourceNode;
            this.isPlayingBGM = true;
        }
        let loadAndAutoPlay = (audioUrl) => {
            const audioContext = this.audioContext;
            const xhr = new XMLHttpRequest();
            xhr.open('GET', audioUrl, true);
            xhr.responseType = 'arraybuffer';
            xhr.onreadystatechange = () => {
                if (xhr.status < 400 && xhr.status >= 200 && xhr.readyState === 4) {
                    audioContext.decodeAudioData(xhr.response, buffer => {
                        this.buffer = buffer;
                        WeixinJSBridge.invoke("getNetworkType", {}, () => this._playSourceNode());
                    });
                }
            }
            xhr.send();
        }
        loadAndAutoPlay(url);
        loadAndAutoPlay = null;
    }

    const bgm = new BGMAutoPlayMgr('http://sy.lamalego.com/epiboly/earth/static/m.mp3');

    setTimeout(function () {

        if (CheckIsAndroid()) {
            //如果是Android
            bgm.toggleBGM();
        }
    },500)

也贴一下判断是否为安卓机型：

function CheckIsAndroid() {
        var browser = {
            versions: function () {
                var u = navigator.userAgent, app = navigator.appVersion;
                return { //移动终端浏览器版本信息
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器 //u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                    iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                };
            }(),
        }
        //if (browser.versions.iPhone || browser.versions.iPad || browser.versions.ios) {
        //    return false;
        //}
        if (browser.versions.android)
            return true;
        return false;
    }

根据自己需要去优化吧，散会！