audio.1.html:39 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

一、audio.1.html:39 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Audio 标签的 autoplay 自动播放功能受限制。

针对于新版谷歌浏览器、火狐浏览器。

对于IE,Edge浏览器还是支持自动播放的。

规则要求:

在用户发生交互的情况下,开启播放。禁止页面加载完,自动播放。

Chrome报错提示最为友善,意思是说,用户还没有交互,不能调play。用户的交互包括哪些呢?包括用户触发的touchend, click, doubleclick或者是 keydown事件,在这些事件里面就能调play.

二、Chrome的autoplay政策在2018年4月做了更改。

新的行为:浏览器为了提高用户体验,减少数据消耗,现在都在遵循autoplay政策,Chrome的autoplay 政策非常简单

  1. muted autoplay始终被允许

  2. 音乐的autoplay 只有在下面集中情况下起作用:

    1. 有用户行为发生像(click,tap,etc).

    2. 对于桌面程序,用户已经提前播放了音频

    3. 对于移动端用户将音频网址home screen.

开启配置,解决方案:

1、 打开chrome
2、输入 chrome://flags/#autoplay-policy
3、点击default,选择 Setting No user gesture is required
4、 重启chrome

 

三、Audio Context 

The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.

 

使用Audio Context 解决自动播放问题: 新版谷歌浏览器不支持自动播放,火狐 或者Edge浏览器支持

<script>
    //使用 AudioContext 实现
    var ctx = new AudioContext();
    //使用Ajax获取音频文件
    //var url = 'http://cdn.jnqianle.cn/audio/mouse.mp3';
    var url = 'http://cdn.jnqianle.cn/audio/notify1.mp3';
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';//配置数据的返回类型
    //加载完成
    request.onload = function () {
        var arraybuffer = request.response;
        console.info(arraybuffer);
        ctx.decodeAudioData(arraybuffer, function (buffer) {
            //处理成功返回的数据类型为AudioBuffer 
            console.info(buffer);
            //创建AudioBufferSourceNode对象
            source = ctx.createBufferSource();
            source.buffer = buffer;
            source.connect(ctx.destination);
            //指定位置开始播放
            source.start(0);
            console.info(source);
        }, function (e) {
            console.info('处理出错');
        });
    }
    request.send();
</script>

 

更多:

HTML5 多媒体之<audio>标签 使用 

新版本chrome浏览器(80版本以后)带来的跨域请求cookie丢失问题  

HTML5 多媒体之<img>标签 使用 

posted @ 2020-08-22 10:42  天马3798  阅读(1059)  评论(0编辑  收藏  举报