错误提示信息：The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
项目场景：
最近做个一个安防项目，视频播放器使用别人封装好的，视频流、视频存储都是在三方，微信小程序使用时压根不支持。最后做了一个大胆决定，写一个自动脚本，有告警消息的时候，打开网页自动播放视频并录频，录好视频之后自动上传到自己的服务器。废话不多说，直接干起来了，脚本写好了，全自动跑的时候就是各种问题。
问题描述
开发人习惯用的谷歌浏览器，我们先把谷歌设为默认浏览器，视频可以自动播放，但是结束录频的时候就报错！错误如下：
The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page
禁止自动播放音频，意思是必须有用户操作才可以继续！
chrome浏览器在2018年4月起，就在浏览器上全面禁止了音视频的自动播放功能。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都会抛出此错误。
换个浏览器试试，刚开始用火狐浏览器，没有错误了，上午跑完，下午就报错了，错误信息如下：
Uncaught (in pramise) DoMException: MediaRecorder.start: An audio track cannot be recorded: video/webm;codecs=vp8 indicates an unsuported codec
提示无法自动录制，与谷歌错误是一样的。
再换个 opera 浏览器试试，最后发现也是报错了。只能想办法解决问题。
爬坑经历：
着急的小伙伴就跳过这个模块，直接看解决方案吧！
爬坑1：
使用 Chrome Flags 调整策略，在谷歌浏览器内 chrome://flags/ 回车，找到 Autoplay policy ，将默认值 " Default " 修改成 " No user gesture is required "选项。
别人的：
而我的浏览器是这样的：
谷歌已经抛弃 chrome://flags/ 了，只能放弃治疗！
爬坑2：
使用 AudioContext 播放音频 解决 谷歌禁止自动播放音频
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
try {
var context = new window.AudioContext();;
var source = null;
var audioBuffer = null;
function stopSound() {
if (source) {
source.stop(0); //立即停止
}
}
function playSound() {
source = context.createBufferSource();
source.buffer = audioBuffer;
source.loop = true;
source.connect(context.destination);
source.start(0); //立即播放
}
function initSound(arrayBuffer) {
context.decodeAudioData(arrayBuffer, function (buffer) { //解码成功时的回调函数
audioBuffer = buffer;
playSound();
}, function (e) { //解码出错时的回调函数
console.log('Error decoding file', e);
});
}
function loadAudioFile(url) {
var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function (e) { //下载完成
initSound(this.response);
};
xhr.send();
}
loadAudioFile('../Content/public/mp3/music2.mp3');
$("#stop").click(function () {
stopSound();
});
} catch (e) {
console.log('!Your browser does not support AudioContext');
}看着大佬写的这么专业，咱也不敢质疑，运行完成之后一个结论，!Your browser does not support AudioContext 。
爬坑3：
有些大佬说可以给 audio 标签加个自动播放
<audio src="" id="audio" controls="controls" autoplay="autoplay"></audio>实话说的我用的 tplink 的三方 sdk ，压根没去找 video 的问题去，水平不行不能乱来呀！
解决方案：
谷歌浏览器摒弃了之前的 Chrome Flags 调整，现在变成设置，火狐、opera、和谷歌这三个浏览器设置方式是一样的。
第一步：
打开谷歌点击右边菜单，选择帮助----进入关于Google Chrome
第二步
第三步 往下滑找到声音 点击 声音右边的小图标
第四步
总结：
至此我的视频播放录频上传文件自动脚本就顺利上线了。重回前端，每天都是与 bug 为伍！希望各位不会像我有这么多的 bug !
