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);
}