enchant.jsでBGMをループ再生させる方法
今回はenchant.jsでのBGMの再生についてです。
基本的には以前紹介した効果音の鳴らし方と同じですですが、BGMということでただ音を鳴らすだけではなく必要な機能も一緒に作ります。
※効果音の鳴らし方はこちらの記事に書いてあります。
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()メソッドを実行するとエラーが出て止まってしまいます。それを避けるためにちょっと面倒臭いことになっています(^^;)
◎関連記事
同カテゴリー記事
記事の感想・コメント
音の再生でうまくいかなくて、そういうことだったのですね、すごく参考になりました。ありがとうございました。
(秘密警察ぎゃぼりん、すごく面白いですね)
お役に立ててうれしいです(*´ω`)
息子さんとゲーム作ってらっしゃるんですね。息子さんの将来に期待してます(*´ω`)
クラスの中のplayやloopを使うのはどうすればいいのでしょうか?
var bgm = new Bgm();
でクラスを作って
bgm.set("ファイル名");
でファイルをセットして
bgm.play();
で再生します。
ループ再生は
this.addEventListener('enterframe', function(){
bgm.loop();
みたいにフレーム処理イベント内に書くとループ再生します。
実行しようとするとthis.data.play();にエラーが出るのですがなぜなのでしょうか?
どういう状態か見てみないとわからないですが、公開しているテンプレートをダウンロードして一度見てみてください。
この技術ブログの別の記事にあります。