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

標籤：

<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();});

 

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