移動端不支持audio自動播放解決方案

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

<audio autoplay preload="auto" controls loop id="audio">
    <source src="music/bgMusic.mp3" type="audio/mpeg" />
    <source src="music/bgMusic.ogg" type="audio/ogg"/>
    您的瀏覽器不支持音頻播放。
</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！這樣自動播放咱們就解決了......
等等......but咱們有可能會加個按鈕來控制音樂的開關。這樣後面發現,我可能不想聽這背景音樂，只想靜靜的瀏覽頁面，當我點擊關閉音樂按鈕後,我繼續瀏覽頁面,這時手碰到了屏幕,聲音又播放了,但是我以前關閉音樂就是爲了避免想它播放,顯然這樣是很差的。
因此感受要用one()才更合適,讓它只能運行一次該事件處理函數。

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

完美!!!