用AudioContext解决谷歌浏览器Chrome不能自动播放音频问题

2018年11月22日14:18:53 5 2,734

只从前几天升级浏览器后发现另一个站点ssslove.com打开后无法自动播放歌曲了。之前用的是Html的autoplay，现在谷歌浏览器禁止网页用autoplay播放音频视频了，Mac下Safari好像也是不让自动播放音频视频的。

在网上搜索几圈以后发现很多相似内容，基本出于同一个人的文章。而这文章主要给广大程序员提供一个解决方式和思路，虽然有代码，但是不可以直接使用的。最后总算找到可以直接使用的代码了，万分感谢这位提供代码的仁兄——香草布丁。

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('https://wuqishi.com/xxx.mp3');
$("#stop").click(function () {
stopSound();
});
} catch (e) {
console.log('!Your browser does not support AudioContext');
}