BGMをループ再生させる方法

※追記　enchant.jsはもう古いのでpixi.jsでenchant.js風に使えるゲームエンジン作りました

▷ pixi.js製ゲームエンジン開発

—————- 追記終わり——————–

今回は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()メソッドを実行するとエラーが出て止まってしまいます。それを避けるためにちょっと面倒臭いことになっています(^^;)

◎関連記事

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