レトロRPGを作る-音楽を再生する

いよいよIE9が日本でもリリースされますが、ようやくIEでもAudioタグが採用されました。そこで音楽の再生について考えてみたいと思います。

まず、既知の問題ですが今のところ全てのブラウザーで再生出来るフォーマットはありません。また、IE8までのブラウザーでも同じコードが使用できるように考慮します（Windows限定)。

とりあえず、Audio タグとして以下のコードが使用できるようにします。

audio = new Audio();
audio.src = "sound.mp3";
audio.play();

Window Media Player

埋め込みタグ(object)を使用して、Audioコントロールが無ければ作成します。

if (window.Audio == null) {
  Audio = function () {
    if (!document.getElementById('Player')) {
      document.write('<object id="Player" classId="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" height="45">');
      document.write('<PARAM name="uiMode" value="invisible">');
      document.write('</object>');
      var e = document.getElementById('Player');
      e.standBy = "loading...";
    }
  };
  Audio.prototype = {
    autoplay: false,
    preload: false,
    src: "",
    loop: true,
    controls: true,
    canPlayType: function (mime) {
      var canType = new Array("audio/wav", "audio/mid", "audio/mpeg");
      for (var i = 0; i < canType.length; i++) {
        if (mime == canType[i]) {
          return true;
        }
      }
      return false;
    },
    play: function () {
      var e = document.getElementById('Player');
      e.URL = this.src;
      e.autoStart = false;
      e.loop = this.loop;
      if (this.controls) {
        e.height = "45";
        e.uiMode = "mini";
      } else {
        e.height = "1";
        e.uiMode = "invisible";
      }
      e.controls.play();
    },
    stop: function () {
      var e = document.getElementById('Player');
      e.controls.stop();
    },
    pause: function () {
      var e = document.getElementById('Player');
      e.controls.pause();
    },
    resume: function () {
      var e = document.getElementById('Player');
      e.controls.play();
    }
  }
}

汎用化

ここからが本題ですが、どのブラウザーでもBGMを再生出来るようにします。
結論から言ってしまえば、あらかじめ複数のコーデックのファイルを用意しておき、再生可能なコーデックのファイルを選択して再生します。
まずは、音の情報を用意します。

    source = [
        { src: "http://localhost/dqfw/sound/town.mp3", type: "audio/mpeg" },
        { src: "http://localhost/dqfw/sound/town.ogg", type: "audio/ogg"}];

この情報を元にcanPlayType()を使用して再生可能なファイルを選択します。

    audio = new Audio();
    function playSound(src) {
        audio.controls = true;
        for (var i = 0; i < src.length; i++) {
            if (audio.canPlayType(src[i].type)) {
                if (audio.appendChild) {
                    document.body.appendChild(audio);
                }
                audio.src = src[i].src;
                audio.play();
            }
        }
    }

再生するにはplaySound(source);とします。

サンプルを用意しました。