微信网页摇动手机播放音频-IOS无法播放的bug

    前段时间做了一个摇奖功能，监测摇动并播放一个“唰 唰”的声音，功能都已实现；突然被告知在安卓上依旧正常，但是在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();
}