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

enchant.jsでブラウザゲームを作ると必ず詰まる部分がサウンドです。

特定のブラウザでは問題なく動作する。しかし、いざ別ブラウザで閲覧するとエラーをはかれ、動かなくなってしまうことがよくありました。

その中でも一番面倒だったループ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. 目薬 より:

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