iOS 12 静音模式下 AudioContext 无法正常播放的 Bug
最近收到用户反馈，网页的背景音乐播放没有声音。
然后我们就按照正常的流程 Debug 。但是我拿到我的 iPhone 7 测试的时候，但是发现是可以正常播放的，但是 iPhone XS 确没有办法播放。 而且这次非常悬疑的是，iPhone XS 的又是可以正常播放虾米音乐的的歌曲。
此时此刻，宝宝的心情，只能用如下图表示:
随后开始看代码，项目的背景音乐是启用了 AudioContext 。这个时候我们强制设置 AudioContext 的音量来，看下是不是 iPhone XS 的问题；
const audioCtx = new AudioContext();
let source = aCtx.createBufferSource();
let buf;
const gainNode = aCtx.createGain(); // Create a gainNode reference.
gainNode.connect(aCtx.destination); // Add context to gainNode
fetch('./test.mp3') // can be XHR as well
.then(resp => resp.arrayBuffer())
.then(buf => aCtx.decodeAudioData(buf)) // can be callback as well
.then(decoded => {
source.buffer = buf = decoded;
source.loop = true;
source.connect(gainNode); //Connecting gain to source
gainNode.gain.value = 1; // 100% VOLUME RANGE OF VALUE IS 0-1
});
可是还是没有效果啊~
自己随后想到是不是 Safari 的 Media Policy 的控制，嗯，一搜果真搜到了，
https://gist.github.com/kus/3f01d60569eeadefe3a1
我们需要在用户点击屏幕的时候将 AudioContext 激活，使它的状态由 suspended 变为 running 。
if (context.state === 'suspended' && 'ontouchstart' in window)
{
var unlock = function()
{
context.resume();
};
document.body.addEventListener('touchstart', unlock, false);
}
这个时似乎感觉离新大陆近了，
然而测试下来，还是没有声音。。。。
这个时候楼主，默默拿起了 iPhone 7 和 XS 看了下，发现XS 的左边的静音键按下了。。。。
取消静音模式，音频正常播放了，因此如果要解决这个问题，建议大家还是用 Audio 元素来弄， AudioContext 应该是 Safari 保持的一个 Media 策略。