前几天做一个移动H5小游戏,其中涉及到播放音频,选择使用了HTML5的<audio>
进行音频的播放,程序写好后测试pc仿iPhone、Android都可以正常播放,然而在iPhone上却没有声音,在网上查阅了一些解决办法,大概是要在.play()
方法之前调用.load()
或 .pause()
,或者把.play()
放在touch事件中,不过我测试了一下也没有效果,但想着原理应该就是如此,于是就开始本地的疯狂测试,最终得到了亲测有效的解决方案:绑定一个touchstart事件(可以绑给最先点击的元素,只用一次就移除的最佳,绑给touchend理论也可以,不过要click那样的才有效,滑动后才touchend的不起作用。。。),调用.load()
,之后在其他方法中调用.paly()
就可以顺利的播放声音了。(注:.**()
前是audio元素,示例代码使用原生ES5,方便大家快速套入自己的技术线)。
解决没有声音代码示例:
// 在touchstart中调用load,如果绑给body或document,可以在load后removeEventListener
document.getElementById('shadow').addEventListener('touchstart', function(e) {
document.getElementById('audio_1').load();
document.getElementById('audio_2').load();
touchstartHandle(e);
}, false);
// 其他方法中就可以调用play了
document.getElementById('money').addEventListener('touchend', function(e) {
document.getElementById('audio_1').play();
document.getElementById('audio_2').play();
touchendHandle(e);
}, false);
然而声音有了之后,却发现操作频繁时声音放的很慢,违和感特别强,当然这问题肯定难不倒我,毕竟,我可是擅长各种黑魔法······
解决音效和操作不同步代码示例:
<!-- HTML: -->
<audio id="money-audio0" src="//cdn1.***.com/media/a.wav"></audio>
<audio id="money-audio1" src="//cdn1.***.com/media/a.wav"></audio>
<audio id="money-audio2" src="//cdn1.***.com/media/a.wav"></audio>
<audio id="money-audio3" src="//cdn1.***.com/media/a.wav"></audio>
// JS
// 相信机智的小伙伴看到上面的一坨就知道我要拉啥了✿✿ヽ(°▽°)ノ✿
var audio_index = 0,
money_audio0 = document.getElementById('money-audio0'),
money_audio1 = document.getElementById('money-audio1'),
money_audio2 = document.getElementById('money-audio2'),
money_audio3 = document.getElementById('money-audio3');
/**
* 也可以直接使用字符串拼接id的方式获取元素,不过这样做每次播放都要
* 重新获取元素,所以可以考虑这种麻烦点的写法
*/
switch (this.audio_index) {
case 0:
money_audio0.play();
break;
case 1:
money_audio1.play();
break;
case 2:
money_audio2.play();
break;
case 3:
money_audio3.play();
break;
default: break;
}
audio_index += 1;
if(this.audio_index === 4) audio_index = 0;
上面是我的渣渣操作,专业点的代码长这样:
如果大家根据该文的方法使用还是无效,欢迎联系我:WX: 13657215665(小冷) QQ:896054682