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