由于需求的不断完善,最近着手的 移动端 代码中需要加入音效,第一反应就是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.src="xxxx.xxx"; shakeAudio.play()
其他问题:在用audio sprit的时候发现安卓不支持,不知道是不是我自己哪里写错了,而且在一些机器中载入音频会有延迟,不太好控制。如果有更好的可行解决办法,希望大家分享~