enchant.jsでBGMをループ再生させる方法

今回はenchant.jsでのBGMの再生についてです。

基本的には以前紹介した効果音の鳴らし方と同じですですが、BGMということでただ音を鳴らすだけではなく必要な機能も一緒に作ります。

※効果音の鳴らし方はこちらの記事に書いてあります。

▷▷▷enchant.jsで効果音を鳴らす

var sound = core.assets['bgm.mp3'];
sound.play();

しかし、上記の方法では1回最後まで再生するとそこで音楽再生が終わってしまいます。ゲームのBGMなのだから自動でループ再生してくれないと困りますねよね。

ってことでBGMのループ再生を可能にしてくれる方法がこちら。

var Bgm = enchant.Class.create({
    initialize: function(){
        this.data = null;
        this.isPlay = false;//プレイの状態フラグ
        this.isPuase = false;
    },
    //BGM用音楽ファイルのセット
    set: function(data){
        this.data = data;
    },
    //再生(再生のみに使う)
    play: function(){
        this.data.play();
        this.isPlay = true;
        if(this.data.src != undefined){//srcプロパティを持っている場合
            this.data.src.loop = true;
        }
    },
    //ループ再生(必ずループ内に記述すること) PCでのループ再生で使う
    loop: function(){
        if(this.isPlay == true && this.data.src == undefined){//再生中でsrcプロパティを持っていない場合
            this.data.play();
            this.isPuase = false;//ポーズ画面から戻った場合は自動的に再生を再開させるため
        }else if(this.isPuase){//srcあり場合でポーズ画面から戻ったとき用
            this.data.play();
            this.data.src.loop = true;//ポーズするとfalseになるっぽい(確認はしていない)
            this.isPuase = false;
        }
    },
    //再生停止(曲を入れ替える前は,必ずstop()させる)
    stop: function(){
        if(this.data != null){
            if(this.isPuase){
                this.isPlay = false;
                this.isPuase = false;
                this.data.currentTime = 0;
            }else if(this.isPlay){
                this.data.stop();
                this.isPlay = false;
            }
        }
    },
    //一時停止(ポーズ画面などの一時的な画面の切り替え時に音を止めたいときのみ使う)
    pause: function(){
        if(this.data != null){
            this.data.pause();
            this.isPuase = true;
        }
    }
});

srcというプロパティがある場合と無い場合で処理を変える必要があります。

srcプロパティを持っているブラウザでは

this.data.src.loop = true;

この一行を再生時に書いておくだけで自動でループ再生してくれます。問題はsrcプロパティが無い場合です。

srcプロパティが無い場合ではメインループの中にplay()メソッドを書いておく必要があります。ただし、直接メソッドを書いてしまうとトラブルを引き起こします(演奏停止したいけどplay()メソッドのせいで停止できない、とか)。

なので演奏状態を管理するフラグを用意して再生中のみにループ再生してくれるようにしました。

loop: function(){
    if(this.isPlay == true && this.data.src == undefined){//再生中でsrcプロパティを持っていない場合
        this.data.play();
    }
}

名前もloopにして何をしてる処理か一目瞭然です(´∀`)

あと、stop()メソッドなんですが、iPhoneでは演奏していない状態でstop()メソッドを実行するとエラーが出て止まってしまいます。それを避けるためにちょっと面倒臭いことになっています(^^;)

◎関連記事

▷▷▷無料でゲーム制作に利用できる音楽・効果音素材サイト集

同カテゴリー記事

当サイトのオリジナルゲーム(ランダム表示)

空いている一つのマスを利用して並び替えるパズルゲーム。
壁や自分の体に当たらないように餌を食べて蛇を大きくするゲーム。
同じ色の宝石の数字を足してゾロ目や順目を3つ以上作って消すゲームです。
餌を全部食べて巣に帰るゲーム。食べる順番が大事。全10ステージ。

記事の感想・コメント

  • どういう状態か見てみないとわからないですが、公開しているテンプレートをダウンロードして一度見てみてください。
    この技術ブログの別の記事にあります。

  • 実行しようとするとthis.data.play();にエラーが出るのですがなぜなのでしょうか?

  • var bgm = new Bgm();
    でクラスを作って
    bgm.set("ファイル名");
    でファイルをセットして
    bgm.play();
    で再生します。
    ループ再生は
    this.addEventListener('enterframe', function(){
    bgm.loop();

    みたいにフレーム処理イベント内に書くとループ再生します。

  • お役に立ててうれしいです(*´ω`)
    息子さんとゲーム作ってらっしゃるんですね。息子さんの将来に期待してます(*´ω`)

  • 音の再生でうまくいかなくて、そういうことだったのですね、すごく参考になりました。ありがとうございました。
    (秘密警察ぎゃぼりん、すごく面白いですね)

コメントを残す

メールアドレスが公開されることはありません。

ゲームジャンルタグ

新着技術ブログ記事

新着開発日記