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();//ループＢＧＭの停止
