JavaScript で音声を扱う方法のまとめ

単純に JavaScript で音が鳴らせるのが面白いと思って最近色々調べていたので、
今まで調べたところを書いておきます。

現在、JavaScript から音声を扱うには 3 つの方法があると理解してます。
(他にもあったらコメント欄とかで教えてください)

  1. QuickTime プラグイン
  2. Flash + ExternalInterface + Sound オブジェクト
  3. audio タグ

QuickTime プラグイン

embed タグで埋め込まれた QuickTime プレイヤーに JavaScript からアクセスする。

特徴
  • QuickTime がサポートしている形式は全て利用できるはず (MP3 / WAVE / MIDI 等)。逆に ogg とか QuickTime が対応していない形式は再生できない
  • embed タグの src タグに data スキームでバイナリデータを埋め込むこともできる (Opera / Safari / Firefox / Chrome のみ、IE は不可)
  • data スキームが埋め込めるので MIDI とかを動的に生成することが可能
  • QuickTime プラグインがインストールされていればどのブラウザでも再生可能
  • embed タグの src タグに別ドメインの URL を埋め込むことも可能
  • 波形データの取得は不可
  • 再生終了のイベントを捕捉することは不可
  • LDR Signal でやっているように setRate() で再生スピードを変えたりもできる
  • QuickTime プラグインのロードが遅いという問題点があるっぽい
実例

Flash + ExternalInterface + Sound オブジェクト

Flash 側で Sound オブジェクトを生成し、ExternalInterface 経由で JavaScript から操作する方法。

特徴
  • Flash から外部ファイルを読み込む場合、ファイル形式は MP3 のみ。swf ファイルに埋め込む場合には MP3 と WAVE が使える
  • Flash の中で data スキームを使うことは不可
  • どのブラウザでも Flash プラグインさえインストールされていれば使える
  • ドメインに置かれている音声ファイルを Flash でロードするには、ファイルを提供するサーバ側で適切な crossdomain.xml を設置している必要がある
  • Flash Player 10 以降では波形データを取得することが可能、動的にサウンドを生成することも可能
  • ロード完了や再生終了のイベントを捕捉することが可能

audio タグ

HTML 5 で定義されている audio タグFirefox, Chrome, Sarafi で既に実装されている (IE では使えない)。

詳細

IEFirefox 以外あんまり調べてないです、すみません。

まとめ

なんか書いててあんまりまとまってなくて嫌になってきたけど、表にしてみた。

- Flash QuickTime audio タグ
ファイル形式 MP3 / WAV (WAV は swf ファイルに埋め込む場合のみ) QuickTime がサポートしている形式 WAV / OGG (Fx のみ確認)
data スキーム × ○ (Fx のみ確認)
ドメインのファイル読み込み crossdomain.xml で設定する必要あり ○ (Fx のみ確認)
波形データ取得 × ○ (Fx カスタムビルド)
イベント取得 × ○ (Fx のみ確認)
クロスブラウザ △ (IE 未対応)
動的生成 data スキームで可能 data スキームで可能 (Fx のみ確認)
ロード時間 普通 遅い?

間違いとかあったら教えてもらえると助かります (まとまってなくて指摘しようがないかもしれない…)。