前段时间做了一个摇奖功能，监测摇动并播放一个“唰 唰”的声音，功能都已实现；突然被告知在安卓上依旧正常，但是在IOS上没有声音了。
按照程序员的思维，我的第一个反应是：
“你是不是静音了？” —— " 并不是"
“那是谁改我代码了？”—— "..."
好吧，查看服务器，JS文件的最后修改时间是两个月前。那就是说没人改动。
（急于寻找答案的同学可以直接翻到最后—_—）开始排查原因，了解到：
在safri on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截
也就是说，音频无法通过代码触发音频的播放，必须通过用户点击等交互动作来触发？
（还是奇怪我之前怎么没问题？因为微信或者IOS版本更新？）
先贴我的代码：
HTML :
<audio id="shakeMusic" src="../sprize/sound/shake.mp3" class="media-audio" preload>您的浏览器不支持音频播放标签。</audio>
JS :
var shakeMusic = document.getElementById("shakeMusic");
window.addEventListener('shake', shakeEventDidOccur, false);
function shakeEventDidOccur(obj) {
shakeMusic.play();
}
首先，测试上面提过的 —— “ 等待用户的交互动作后才能播放media。”
新建一个元素，并用点击事件触发shakeMusic.play()，如：
<div id="playShake" onclick="shakeMusic.play();"></div>
测试发现播放正常，也就是说：在IOS里并没有把自定义事件shake当成交互动作...
点击后，再摇动，发现摇动也会有声音！那就是说：在点击之前audio是没有被加载的？
那么在获得shakeMusic后，加载一下音频。如：
var shakeMusic = document.getElementById("shakeMusic");
// 微信提供的事件，微信浏览器内部初始化完成后
document.addEventListener("WeixinJSBridgeReady", function () {
shakeMusic.load();
}, false);
测试OK，Bug修复完毕！！！
贴一下完整代码：
HTML :
<audio id="shakeMusic" src="../sprize/sound/shake.mp3" class="media-audio" preload>您的浏览器不支持音频播放标签。</audio>
JS :
var shakeMusic = document.getElementById("shakeMusic");
// 微信提供的事件，微信浏览器内部初始化完成后
document.addEventListener("WeixinJSBridgeReady", function () {
shakeMusic.load();
}, false);// 监听手机摇动
window.addEventListener('shake', shakeEventDidOccur, false);function shakeEventDidOccur(obj) {
shakeMusic.play();
}
