zoukankan      html  css  js  c++  java
  • 针对微信无法自动播放问题

    由于微信浏览器时不时出现无法自动播放音乐的问题,比如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;
        }
  • 相关阅读:
    函数的一些应用
    关于javascript的一些知识以及循环
    <记录学习>京东页面最后一天HTML以及css遇到的问题
    <记录学习>(前三天)京东页面各种注意点
    银行账号输入格式代码
    CSS兼容性常见问题总结
    移动端实现摇一摇并振动
    LESS使用方法简介(装逼神器)
    H5移动端性能优化
    BFC,IFC,GFC,FFC的定义及功能
  • 原文地址:https://www.cnblogs.com/qianduanjingying/p/13137771.html
Copyright © 2011-2022 走看看