Html5 Audio 在行動裝置上的播放問題

之前開發Html5遊戲有遇到一個問題，在此備忘一下，也給有需的朋友參考。

Html5 Audio標籤可以很容易直接撥放音效。

瀏覽器可以支援mp3格式的狀況下只要先建立一個Audio物件

var audio = new Audio('bgm.mp3');

遊戲中需要播放這個音效時只要

audio.play();

就可以直接撥放這個音效。

這個方法在PC的瀏覽器上沒有任何問題，但是到行動裝置上卻發現無法撥放。

原因是 Audio 物件在行動裝置中的載入動作需要綁定在一個Touch事件上。

最後我是在頁面上，做了一個開始按鈕 ，按下時也同時載入音效資源。

記得不管用拐用騙，總之放一個按鈕讓user去觸發Touch事件就對了，如果沒有綁在事件上，load()都是沒有作用的。

var audio = new Audio('bgm.mp3');

$("#btn").click(function(){

         audio.load();

});

載入完成之後就可以快樂的使用 audio.play(); 來播放音效了

備註:

audio.oncanplaythrough = function(){
     //載入完成}

audio.onended = function(){       

     //播放完成  

}
關於Audio在行動裝置上autoPlay的支援度可以參考下文
http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/

Evernote 幫您記住生活的點點滴滴，輕鬆保持條理。下載 Evernote。