The Web Audio autoplay policy will be re-enabled in 音频无法播放

原因
1. https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
2. The Web Audio autoplay policy will be re-enabled in Chrome 70 (October 2018). Please check that your website is compatible with it. https://goo.gl/7K7WLu

解决方案1

var url = 'http://yourdomain/music';
var context = new AudioContext();
var req = new XMLHttpRequest();
req.open('GET', url, true);
req.responseType = 'arraybuffer';

var music = {};

req.onload = function () {
context.decodeAudioData(req.response, function (buf) { // 将拿到的audio解码转为buffer
var getSource = function () { // 创建source源。
var source = context.createBufferSource();
source.buffer = buf;
source.connect(context.destination);
return source;
};

music.start = function () { // 游戏开始
console.log('hhh')
getSource().start();
};
music.start();

},
(error) => {
if (window.console && window.console.error) {
window.console.error(`音频: ${url} 读取错误`, error);
hasWebAudioAPI.data = false;
}
});
};

req.send();

方案2

<audio id="player" autoplay>
<source src="audio/source.mp3" type="audio/mp3">
</audio>

// 需要用户点击一次屏幕
document.addEventListener('click', musicPlay);
function musicPlay() {
document.getElementById('player').play();
document.removeEventListener('click', musicPlay);
}

转载于:https://juejin.im/post/5d020e61e51d4555e372a5dd