HTML5遊戲引擎中音頻的播放政策

 [本文屬原創，如有轉載，請注明出處http://blog.csdn.net/yl02520/article/]

 随着HTML5 API的不斷豐富和浏覽器對HTML5支援的不斷完善，基于HTML5開發的遊戲引擎也慢慢流行，Web開發者基于HTML5遊戲引擎開發的遊戲可以很好的實作跨平台功能，例如遊戲開發者基于Android開發一款遊戲，馬上就能運作在iOS裝置上，這大大減少了遊戲的開發周期，對開發者來說是最大的實惠。

        在遊戲引擎中，音樂的播放是必須的，目前我們見到的遊戲中幾乎都有背景音樂，那麼如何在HTML5遊戲引擎中實作音頻檔案的播放呢？首先我們想到的是HTML5提供的audio元素，現在普遍的做法是在HTML檔案中動态插入一個audio元素，再把audio元素的src屬性設定成需要播放檔案的路徑，然後調用play方法即可完成音頻的播放。

示例代碼如下：

var au = document.createElement('audio');
au.src = “./audio/demo.mp3”; //設定音頻檔案的路徑
au.play(); //開始播放音頻檔案
           

        在PC浏覽器中，上述方案可以正常工作，但是在移動裝置Android和iOS上可能會存在下面兩個問題。

1.  移動裝置上的audio元素在播放前需要一個觸屏消息，也就是說無論在audio元素中設定了autoplay或是明确的調用play方法，都不能立即播放音頻檔案，必須等待使用者觸摸螢幕後才能播放。目前Android裝置上的Chrome浏覽器和原生的Android浏覽器都有該限制，iOS也有該限制，目的是為了節省移動裝置的資源。

2.  移動裝置上的某些浏覽器暫時不支援多個音頻檔案同時播放，這對遊戲開發者是不能接受的，因為遊戲一般都有背景音樂，另外在遊戲的過程中，也同時需要觸發其他音樂。目前Android裝置上原生的Android浏覽器就會有該限制。

         面對上述兩個問題，在遊戲引擎中依靠簡單的插入audio元素來播放音樂的方案，在移動裝置上就行不通了，是以一些流行的HTML5遊戲引擎就采用了另外一種方案，當浏覽器支援WebAudio API時，就采用WebAudio替換audio元素來播放音頻檔案。比如Cocos2d-html5和Construct2，前者是開源的遊戲引擎，在國内比較流行，後者是需要收費的，在國外應用較廣。

         如何通過WebAudio來播放音頻檔案呢？請參看另外一篇博文http://blog.csdn.net/yl02520/article/details/17325005

Android裝置上的Chrome浏覽器上現在已經支援了WebAudio，通過WebAudio來播放音樂也同樣被下面兩個問題所困擾。

1. 當需要播放的音頻檔案很大時，檔案加載時間很長，因為WebAudio在播放音頻檔案前，需要把音頻檔案全部加載進記憶體，并全部解碼後才能開始播放，這是由于WebAudio的低延時政策引起的。例如一個5MB的mp3檔案，在Nexus4上的加載和解碼時間大概需要4～5秒。

2.  WebAudio播放音樂是的音量太小。這是因為Chrome正在使用通話模式來播放音樂，這是Chrome在實作上的問題，不過該問題在Chromium上已經解決了，估計在Chrome 34或35之後就能生效了。