[cocos2dx-JSB/HTML5篇]在各個瀏覽器上播放音檔

文章撰寫日期︰2013/08/18 13：31
文章修改日期︰2013/11/30 16：25
文章修改次數︰5
cocos2dx使用版本︰v 2.1.4 / v 2.1.5
cocosBuilder使用版本︰v 3.0 alpha 5

一、前言

Codec support in modern desktop browsers

Browser	Ogg Vorbis	MP3	WAV
FireFox 3.6+	✓		✓
Safari 5+		✓	✓
Chrome 6	✓	✓
Opera 10.5+	✓		✓
Internet Explorer 9 (beta)		✓	✓

由於每個瀏覽器能播放的音檔格式皆不同，
Cocos2d-HTML5 也幫我們處理了這個問題。

二、本文開始

以下文章來自raywenderlich

Gratuitious Music and Sound Effects

You’re pretty close to having a workable (but extremely simple) game now. You just need to add some sound effects and music (since what kind of game doesn’t have sound!) and some simple game logic.
這個遊戲就快要完成了(但貌似還非常簡單)，現在你還需要做的就是替這個遊戲添加聲音和特效(哪個遊戲沒有特效!)和一些簡單的遊戲邏輯。

First, update Cocos2DSimpleGame\Src\resource.js to add the sound effects:
首先，先更新在Cocos2DSimpleGame\Src\resource.js裡的這個聲音特效檔︰

var dirArt = "Art/";
var dirSounds = "Sounds/";
 
var s_player = dirArt + "player.png";
var s_monster = dirArt + "monster.png";
var s_projectile = dirArt + "projectile.png";
 
var s_bgMusic = dirSounds + "background-music.mp3";
var s_bgMusicOgg = dirSounds + "background-music.ogg";
var s_bgMusicCaf = dirSounds + "background-music.caf";
 
var s_shootEffect = dirSounds + "pew-pew-lei.mp3";
var s_shootEffectOgg = dirSounds + "pew-pew-lei.ogg";
var s_shootEffectWav = dirSounds + "pew-pew-lei.wav";
 
var g_ressources = [
 
    {type:"image", src:s_player},
    {type:"image", src:s_monster},
    {type:"image", src:s_projectile},
 
    {type:"sound", src:s_bgMusic},
    {type:"sound", src:s_bgMusicOgg},
    {type:"sound", src:s_bgMusicCaf},
 
    {type:"sound", src:s_shootEffect},
    {type:"sound", src:s_shootEffectOgg},
    {type:"sound", src:s_shootEffectWav}
 
];

Note that both the background music and sound effects are each saved in three different formats: mp3, ogg, and wav. This is because not all browsers support all formats, so by adding all three we will have the highest possible chance of the player being able to hear something. Cocos2D will detect what the browser supports and use the appropriate file – as long as they have the same filename.
注意︰這邊看到每一個背景音樂、聲音特效都被分別儲存了3種格式︰mp3、ogg和wav。主要是因為並非每種瀏覽器都能播放所有的音檔格式，所以準備3種格式的音檔，最能確保聲音播放是沒問題的。Cocos2D會偵測使用者用的瀏覽器支援了哪種適合的檔案-只要檔名都一樣就找的到。

var audioEngine = cc.AudioEngine.getInstance();

This gets a global reference to the audio engine so you can use it later. Then add this line to the end of onEnter:
這行取得到公域參照︰audio引擎，因此接下來的code你可以開始使用這個物件。把這行加到onEnter函式的最後一行吧！

audioEngine.playMusic(s_bgMusic, true);

audioEngine.playEffect(s_shootEffect);

Save the file and refresh your browser, and now you should have some groovy tunes!
存檔，重整您的瀏覽器，現在您將聽到優雅動人的音樂！

備註︰
audioEngine.playMusic如果直接傳參數xxx.mp3，
Cocos2d-html5就不會自動的幫你找xxx.ogg檔播放。
請宣告變數

var s_bgMusic = "xxx.mp3";

再用

audioEngine.playMusic(s_bgMusic, true);

播放，
這樣才會在Firefox上自動找xxx.ogg檔播放。

三、我的試驗心得

使用playMusic()時，
Cocos2d-html5會幫我們在背後自動判斷該音檔是否能夠在瀏覽器播放，
假設現在我們要播abc.mp3，
Cocos2d-html5發現Firefox不能播mp3，
那麼Cocos2d-html5會再去找有沒有abc.ogg或abc.wav檔來播放。

但是，
cocos2d-html選擇前，
會先去resources-html5.js資源裡去找是否有宣告此資源可用。

因此，
即使您有放置abc.ogg檔在資源目錄下，
但卻沒在resources-html5.js檔裡宣告。
Firefox仍會無法播音！

CocosBuilder3.0 Alpha5 目前仍沒有將ogg檔宣告進resources-htm5.js的資源檔中，這個問題會導致Firefox一直無法聽到音檔。唯一的做法就是去修改CocosBuilder源碼，請CocosBuilder輸岀HTML5資料夾時，也一併將ogg檔添加進resource-html5.js裡。

修改的方法(以CocosBuilder 3.0 Alpha5 為例)

在CocosBuilder源碼檔案CocosBuilder\Publishing\CCBPublisher.m裡

1. 60行: 函式initWithProjectSettings中

    // Setup extensions to copy
    copyExtensions = [[NSArray alloc] initWithObjects:@"jpg",@"png", @"pvr", @"ccz", @"plist", @"fnt", @"ttf",@"js", @"json", @"wav",@"mp3",@"m4a",@"caf", nil];

改成

    // Setup extensions to copy
    copyExtensions = [[NSArray alloc] initWithObjects:@"jpg",@"png", @"pvr", @"ccz", @"plist", @"fnt", @"ttf",@"js", @"json", @"wav",@"mp3",@"ogg",@"m4a",@"caf", nil];//添加ogg副檔

2. 774行: 函式publishGeneratedFiles中

if ([ext isEqualToString:@"plist"]) type = @"plist";
            else if ([ext isEqualToString:@"png"]) type = @"image";
            else if ([ext isEqualToString:@"jpg"]) type = @"image";
            else if ([ext isEqualToString:@"jpeg"]) type = @"image";
            else if ([ext isEqualToString:@"mp3"]) type = @"sound";
            else if ([ext isEqualToString:@"ccbi"]) type = @"ccbi";
            else if ([ext isEqualToString:@"fnt"]) type = @"fnt";

改成

if ([ext isEqualToString:@"plist"]) type = @"plist";
            else if ([ext isEqualToString:@"png"]) type = @"image";
            else if ([ext isEqualToString:@"jpg"]) type = @"image";
            else if ([ext isEqualToString:@"jpeg"]) type = @"image";
            else if ([ext isEqualToString:@"mp3"]) type = @"sound";
            else if ([ext isEqualToString:@"ogg"]) type = @"sound";//加入這行
            else if ([ext isEqualToString:@"ccbi"]) type = @"ccbi";
            else if ([ext isEqualToString:@"fnt"]) type = @"fnt";

編譯並執行CocosBuilder，
會發現輸岀的HTML5資料夾resources-htm5.js檔裡， 都含蓋.ogg檔了！