移動H5 iPhone audio沒有聲音(聲音不同步)問題的解決方式
阿新 • • 發佈:2019-01-08
前幾天做一個移動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