javascriptで音を連続して再生させる

リズムゲームをHTML+jsで作ろうと思ったときに一番解決に時間のかかった部分です。かなり初歩的な問題だったなぁと思いながら、いざ調べると解決に至る記事が見つからなかったんですよね…。

HTMLやjsでの操作をトリガーに、音を「再生終了を待たずに再生させる方法」です。
一回押した後音が鳴り終わるまで再生を止める方法や連打を防止する記事は多かったんですが反対の方法はなかったのでメモ用に書きます。

javascript

音を呼びだす部分となる関数に、ローカル変数と.play()を書くだけでやってます。メモリの問題などは考慮していないので本当に連打は制御しなければならないかもしれないですが…。


function AudioTest(){
  var audio = new Audio("音ファイルのパス");
  audio.play();//音を鳴らす
}

//jQuery
$(function(){
      $('.トリガーにする要素のclass名').on("touchstart",function(){
          AudioTest();
      });
    });

やってることはこれをonclickなどで呼び出すだけです。こんだけ書くだけに3週間くらい悩んでいたので柔軟な発想が欲しいです。引数でファイルのパスなどを変えてもいいかと思います!(^^)!

リズムゲームで連打譜面や太〇の達人で言うお芋の処理なんかでこれが有効活用できたら譜面のバリエーションに困らなくなるかなぁと。

audioタグなどを数用意してjsで個別に呼び出しという方法もあるようですが、見通しが良くないかなって思うので個人的にはやりったくないです。
初心者なりに至った考えなので同じように悩んだ方には、また改良などでゲーム制作などに役立てたらと思います。

余談注意

情報を求めいていた時に目にしたのですが、ブラウザゲームを作るときにモノによっては初回再生をユーザーにさせないといけないみたいなので、スタート画面で無音再生をさせたりする必要があるみたいです。
こちらも参考にさせていただきました。phina.jsで音ゲーを作ってみる