解決移動端音頻自動播放問題

<audio id="audio" autoplay='autoplay' loop='loop'>
    <source src="SeeYou.mp3" type="audio/ogg">
    <source src="SeeYou.mp3" type="audio/mpeg">
</audio>

 在開發webapp時，有時候你可能要加點背景音樂，這時我們會用到HTML5音頻Audio。

 

做完后我們放PC端測試可以完美的進行自動播放（當然，是在你瀏覽器支持的情況下）。然后拿手機來試試看，你會發現有些手機里可以自動播放，而有些不能。這是為什么呢？這是因為有些手機瀏覽器把這個自動播放的功能給禁掉了。查閱資料可以知道，在safri on ios里面已經明確指出等待用戶的交互動作后才能播放media,也就是說如果你沒有得到用戶的action就播放的話就會被safri攔截。
看到這里一般很多人以為這樣可以解決：

 

var audio = document.getElementById('audio');
window.onload=function(){
    audio.play();
}

其實這樣你還是沒有和瀏覽器進行交互的,是不行的。
那么我們還有其它的解決方案么？其實有個障眼法的解決方法:
在我們一般打開手機網站,我們的手指是不是會不經意的就碰到了屏幕,想到這里，這樣我們就可以給html或body添加個這樣的事件：

 

$('html').on('touchstart',function(){
audio.play();
});

 

 這樣就OK了。但我們有可能會加個按鈕來控制音樂的開關。這樣后面發現,我可能不想聽這背景音樂，只想靜靜的瀏覽頁面，當我點擊關閉音樂按鈕后,我繼續瀏覽頁面,這時手碰到了屏幕,聲音又播放了,可是我之前關閉音樂就是為了不想它播放,顯然這樣是不好的,所以感覺要用one()才更合適,讓它只能運行一次該事件處理函數。

$('html').one('touchstart',function(){
    audio.play();
});