サウンドの連続再生

javascript

HTML5のAudioタグとJavascriptを使って、複数のサウンドを順番に再生するサンプルを作ってみた。

audio#endedイベントで再生終了が判定できるので、その度に次のサウンドを再生している。

本当はイベントの解除を arguments.callee を使って書ければこんなにトリッキーな書き方をしなくてもいいのだけど、 ストアアプリでも使えるように strictモード で動作させようと思うと callee の呼び出しがエラーになってしまうから。。

といって、無名関数のままではイベントの解除ができなくなってしまうので、変数へ関数をいったん保存しておいて使うという苦肉の策^^;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Play sound sample</title>
    <script type="text/javascript">
      window.onload = function() {
        document.getElementById("playButton").addEventListener("click", function (e) {
          var sound1 = document.getElementById("sound1");
          var sound2 = document.getElementById("sound2");
          var sound3 = document.getElementById("sound3");

          var funcEnded = function (arr) {
            var funcCurrEnded = function () {
              if (!arr || arr.length == 0) {
                return null;
              }
              var cur = arr[0];
              var nxt = (arr.length > 1) ? arr[1] : null;

              cur.removeEventListener("ended", funcCurrEnded);
              if (nxt) {
                nxt.addEventListener("ended", funcEnded(arr.slice(1)));
                nxt.play();
              }
            }
            return funcCurrEnded;
          }
          sound1.addEventListener("ended", funcEnded([sound1, sound2, sound3]));
          sound1.play();
        });
      }
    </script>
  </head>
  <body>
    <audio id="sound1">
      <source src="./sound1.wav" />
    </audio>
    <audio id="sound2">
      <source src="./sound2.wav" />
    </audio>
    <audio id="sound3">
      <source src="./sound3.wav" />
    </audio>
    <button id="playButton">Play(Normal)</button>
  </body>
</html>

サウンドが重複して再生されていたりしないから、多分正常に動いているはず。 正解かどうかは分からないけど^^;