移動端音訊自動播放相關

蒲絨絨的帽子發表於2018-07-11
專案背景:app中的H5頁面需要新增背景音樂 

 <audio id="audio" preload="auto" autobuffer="autobuffer" loop="loop" src="music.mp3"></audio>

 問題:部分手機不支援autoplay屬性(safari遮蔽了autoplay,安卓的部分手機),在頁面載入時呼叫audio.play()部分手機也會被攔截 

 妥協解決方案:在使用者的互動動作後,音訊是允許播放的 可接受方案就是在使用者的隨機操作時,播放音樂,在頁面監聽touch事件

$('body').one('touchstart',function(e){

       e.preventDefault(); 

       audio.play();

}); 

部分安卓8系統的手機touchstart事件也不允許播放音訊,所以再監聽一下touchend

 $('body').one('touchend',function(){ //start事件也不觸發play 

     audio.play(); 

});

one()方法限定繫結事件只執行一次,防止之後的使用者誤操作




相關文章