H5音频不能自动播放的问题

原创
2018/09/28 11:56
阅读数 7.9K

原因
 1. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
 2. The Web Audio autoplay policy will be re-enabled in Chrome 70 (October 2018). Please check that your website is compatible with it. https://goo.gl/7K7WLu

解决方案1

 var url = 'http://yourdomain/music';
    var context = new AudioContext();
    var req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.responseType = 'arraybuffer';

    var music = {};

    req.onload = function () {
        context.decodeAudioData(req.response, function (buf) { // 将拿到的audio解码转为buffer
            var getSource = function () { // 创建source源。
                var source = context.createBufferSource();
                source.buffer = buf;
                source.connect(context.destination);
                return source;
            };

            music.start = function () { // 游戏开始
                console.log('hhh')
                getSource().start();
            };
            music.start();


        },
            (error) => {
                if (window.console && window.console.error) {
                    window.console.error(`音频: ${url} 读取错误`, error);
                    hasWebAudioAPI.data = false;
                }
            });
    };

    req.send();

方案2

 
    <audio id="player" autoplay>
        <source src="audio/source.mp3" type="audio/mp3">
    </audio>

    // 需要用户点击一次屏幕
    document.addEventListener('click', musicPlay);
    function musicPlay() {
        document.getElementById('player').play();
        document.removeEventListener('click', musicPlay);
    }

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部