使用 AudioContext 播放音频 解决 谷歌禁止自动播放音频

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
Chrome 66为了避免标签产生随机噪音,关掉了声音自动播放,也就是说 在桌面版浏览器也将失效。

解决方法:

1.在chrome 浏览器中输入:chrome://flags,搜索“Autoplay policy”,默认为“Default”,
修改为 “No user gesture is required” 就可以了;此方法仅限谷歌浏览器,而且比较笨拙,
但是问题可以解决;

2.在使用video标签的过程中,设置muted静音播放,问题也可以得到解决,但是对于有播放声音
要求的同学来说,问题还是得不到解决,代码如下:

3.遇到需要播放音频的需求,我们不一定要使用audio标签,还可以用介绍了浏览器的音频API 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');
}

你可能感兴趣的:(使用 AudioContext 播放音频 解决 谷歌禁止自动播放音频)