由于需求的不断完善，最近着手的 移动端 代码中需要加入音效，第一反应就是audio，做完demo之后测试发现在 safari 浏览器中没有得到想要的效果，经过查阅资料发现很多前辈都遇见过这个坑，并总结出很多的方案来对应（膜拜），为了总结在这里做个笔记，也说一说我自己的代码中实际的问题和解决办法~
先说一说audio在safari中的一些限制。
1.每次只能播放一个音频。
意思就是说我在播放一个音频的时候，不能同时播放另一个音频，代码中没有这种需求，真实性有待考证。
2.不支持 preload 和 autoplay
safari中会忽略掉这两个属性，只有用户主动做出动作允许才会加载和自动播放，这个用户动作包括一些点击或者touchstart等等事件，也由于这个问题导致了页面做了很大改动。
业务代码描述：
手机摇一摇（加入摇一摇的音效），摇完之后触发某个事件（加入事件音效）。
大概代码：
1.页面初加载时，引导用户去点击一下屏幕，在这个交互中load摇一摇的音频。testEl.addEventListener('touchstart',function({shakeAudio.load();},false)
2.摇一摇的时候去播放这个音频window.addEventListener('devicemotion', function () {shakeAudio.play();},false。
3.摇一摇之后触发某个事件的同时改变音频路径，改成该事件音效然后播放shakeAudio.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxxx.xxx"; shakeAudio.play()
其他问题：在用audio sprit的时候发现安卓不支持，不知道是不是我自己哪里写错了，而且在一些机器中载入音频会有延迟，不太好控制。如果有更好的可行解决办法，希望大家分享~