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

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

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

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

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

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

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);//ループBGMのファイルパスを引数にするとループ再生
M_Sound.Set(M_Coin);//Set二回目以降は直前のBGMを停止した後ループ再生
Sound.Stop();//ループBGMの停止 

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク

コメント

  1. 目薬 より:

    はじめまして、BGMループクラス使わせていただきました。
    使わせていただいたのですが
    var M_Sound = new SoundLoop(core);
    の部分でSoundLoop is not a constructorとエラーが出てしまいます。
    (gameの部分はcoreに変えました。)
    どうすればよいでしょうか。

    • hothukurou より:

      目薬さん

      ご使用の報告をくださり、ありがとうございます!
      もし使いづらかったり、改善点を発見しましたら、ご報告いただけましたら改善いたします。

  2. 目薬 より:

    解決いたしました。
    お騒がせしてすみません。
    サウンドクラス使わせていただきます。