针对微信无法自动播放问题

 

由于微信浏览器时不时出现无法自动播放音乐的问题，比如7.0.8及现在的7.0.15,都无法播放音乐。

替代方案：

<!--music start-->
<aside class="media-wrap on">
            <img class="music_on" src="images/music_Light_on.png" alt="">
            <img class="music_off" src="images/music_Light_off.png" alt="">
</aside>
<audio id="autoplay" src="music.mp3"></audio>

function onDomReady() {
    musicSwitch();
    console.log('DOM is ready');
}

// 音乐切换
    function musicSwitch() {
        var mediaWrap = document.querySelector('.media-wrap');
        var audio = document.querySelector('#autoplay');
        var musicOn = document.querySelector('.music_on');
        var musicOff = document.querySelector('.music_off');
        var AudioContext = window.AudioContext || window.webkitAudioContext;
        var audioCtx = new AudioContext();
        // IOS策略，无法自动播放，只能使用原来的方式播放
        var isUseAudioCtx = AudioContext && !/\(i[^;]+;( U;)? CPU.+Mac OS X/gi.test(navigator.userAgent);
        // var isUseAudioCtx = AudioContext;
        var url = audio.getAttribute('src');
        var isPalying = true;
        if (isUseAudioCtx) {
            loadSound(url, audioCtx);
        } else {
            document.addEventListener(
                'WeixinJSBridgeReady',
                function() {
                    audio.play();
                },
                false
            );
            audio.play();
            $('#autoplay').on('ended', function() {
                this.load();
                this.play();
            });
        }
        mediaWrap.addEventListener(
            'click',
            function() {
                if (isUseAudioCtx) {
                    if (audioCtx.state === 'suspended') {
                        audioCtx.resume();
                        isPalying = true;
                    } else {
                        audioCtx.suspend();
                        isPalying = false;
                    }
                } else {
                    if (audio.paused) {
                        audio.play();
                        isPalying = true;
                    } else {
                        audio.pause();
                        isPalying = false;
                    }
                }
                if (isPalying) {
                    mediaWrap.classList.add('on');
                    musicOn.style.display = 'block';
                    musicOff.style.display = 'none';
                } else {
                    mediaWrap.classList.remove('on');
                    musicOn.style.display = 'none';
                    musicOff.style.display = 'block';
                }
            },
            false
        );
    }
    function loadSound(url, context) {
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'arraybuffer';
        // Decode asynchronously
        var onError = function(e) {
            console.log(e);
        };
        request.onload = function() {
            context.decodeAudioData(
                request.response,
                function(buffer) {
                    playSound(buffer, context);
                },
                onError
            );
        };
        request.send();
    }

    function playSound(buffer, context) {
        var source = context.createBufferSource();
        source.buffer = buffer;
        source.connect(context.destination);
        source.start(0);
        source.loop = true;
    }