enchant.jsのループＢＧＭ再生がブラウザによって動作が異なる問題を解決する。

enchant.jsでブラウザゲームを作るといつもサウンドで躓きます。

GoogleChromeだと動くのにIEだと止まるやん！原因究明のために、F12キー押してデバック見てみると、大抵サウンド部分でエラーを検出していたりします。

その中でも一番面倒だったループＢＧＭ再生を、どんな環境でも再生できる形でクラス化したのでお使いください。

まずは動作原理から説明します。

実はブラウザによってループ再生方法が変わる

enchant.jsにおける音再生ですが、ブラウザによって二通りの実装方法があります。

ちなみに、話は逸れますが、iOSで音を鳴らす際は以下のコードを上の方に貼ってください。

enchant.Sound.enabledInMobileSafari = true;//iOSでがなるようにする

(1)サウンドループフラグによりループ

Sound.play();
Sound.src.loop = true;

(2)enterframeによりループ

game.onenterframe=function(){ //enterframeイベントのイベントリスナー
Sound.play();
};

これのどちらかで再生ができます。ただ、

(1)が可能なブラウザが(2)を実行すると、音再生が毎フレームごとに実行されてしまいますし、

(2)が可能なブラウザが(1)を実行すると、エラーが出てしまいます。

そこで、Sound.srcが存在するか否かで(1)か(2)のどちらを使用するか分けられるようにします。

その処理を加えたクラスが以下のコードです。

コード

//サウンドクラス
SoundLoop = Class.create(Sprite, {
Sound,
SFlg:0,
game,
initialize:function(_game){ //クラスの初期化(コンストラクタ)
game=_game;
Sprite.call(this,0,0); //スプライトの初期化
SFlg=0;
game.onenterframe=function(){ //enterframeイベントのイベントリスナー
if(SFlg==1){
try{
if(!Sound.src){ //もしSound.srcがないならenterframeによるループ再生
Sound.play();
}
}catch(e){}
}
};
},
Set:function(_Sound){
Sound=_Sound;
SFlg=0;
try{
Sound.stop();
}catch(e){}
Sound=game.assets[Sound];
try{
// もしSound.srcがあるなら、ループ再生フラグをtrueにする。
if(Sound.src){
Sound.play();
Sound.src.loop = true;
}
}catch(e){}
SFlg=1;
},
Stop:function(Sound){
try{
Sound.stop();
SFlg=0;
}catch(e){}
}
});

//サウンドクラスここまで

使い方

//音読み込み
var M_Coin="sound/Coin.wav";
game.preload([M_Coin]);

var M_Sound=new SoundLoop(game); //gameクラスを引数にして宣言
M_Sound.Set(M_Coin);//ループＢＧＭのファイルパスを引数にするとループ再生
M_Sound.Set(M_Coin);//Set二回目以降は直前のＢＧＭを停止した後ループ再生
Sound.Stop();//ループＢＧＭの停止