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>标签 使用