qianduanjingying

 

由于微信浏览器时不时出现无法自动播放音乐的问题,比如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;
    }

 

分类:

技术点:

相关文章: