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

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

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

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

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

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

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

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

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

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

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

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

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

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

◎関連記事

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

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

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

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

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

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

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

コメントを残す

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