JavaScript で音声を扱う方法のまとめ
単純に JavaScript で音が鳴らせるのが面白いと思って最近色々調べていたので、
今まで調べたところを書いておきます。
現在、JavaScript から音声を扱うには 3 つの方法があると理解してます。
(他にもあったらコメント欄とかで教えてください)
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 プラグインのロードが遅いという問題点があるっぽい
実例
- Source for "LDR - Signal" – Userscripts.org
- JS-909 (ソース)
- WAVE を鳴らしている例。同時再生でリズムマシーンみたいなことしてて面白い
- ドを鳴らす、QuickTime、MIDI、DATAスキーム - はてなダイアリー - 無料で簡単。広告のないシンプルなブログをはじめよう!
- midi を鳴らしている例
- LDR上ではてブ数を可聴化するgreasemonkey、LDRHatebuCountListenableを書いた (polog)
- 同じく midi を鳴らしている例
Flash + ExternalInterface + Sound オブジェクト
Flash 側で Sound オブジェクトを生成し、ExternalInterface 経由で JavaScript から操作する方法。
特徴
実例
- Javascript Sound Kit
- JavaScript用Flashプロキシ、Javascript Sound Kit - はてなダイアリー - 無料で簡単。広告のないシンプルなブログをはじめよう!
- JavaScript から MML を再生する - JSMML - 川o・-・)<2nd life
- HTML5.Audio - JavaScriptからMP3再生ライブラリ(HTML5風) Kawa.netブログ(川崎有亮)/ウェブリブログ
- ウノウラボ Unoh Labs: JavaScriptからMP3ファイルを再生する方法
- JavaScriptでMP3を再生するライブラリの作り方(1/2):CodeZine
audio タグ
HTML 5 で定義されている audio タグは Firefox, Chrome, Sarafi で既に実装されている (IE では使えない)。
詳細
IE と Firefox 以外あんまり調べてないです、すみません。
- Firefox では WAVE と ogg のみ再生可能、MP3 はライセンスの関係か未対応 (Audio - MDC)、IE は audio タグ未対応 (IE 9 で対応する?)
- Firefox では data スキームでデータを埋め込むことも可能
- Firefox ではカスタムビルド + audio タグで波形データを取得することもできる (Ajaxian » Amazing Audio Sampling in JavaScript with Firefox)
- 別ドメインの MP3 データも読み込むことができる
- Firefox だったらさまざまなイベントを取得可能 (Firefox でマルチメディアコンテンツを扱う - MDC)
まとめ
なんか書いててあんまりまとまってなくて嫌になってきたけど、表にしてみた。
- | Flash | QuickTime | audio タグ | ||||
ファイル形式 | MP3 / WAV (WAV は swf ファイルに埋め込む場合のみ) | QuickTime がサポートしている形式 | WAV / OGG (Fx のみ確認) | ||||
data スキーム | × | ○ | ○ (Fx のみ確認) | ||||
別ドメインのファイル読み込み | crossdomain.xml で設定する必要あり | ○ | ○ (Fx のみ確認) | ||||
波形データ取得 | ○ | × | ○ (Fx カスタムビルド) | ||||
イベント取得 | ○ | × | ○ (Fx のみ確認) | ||||
クロスブラウザ | ○ | ○ | △ (IE 未対応) | ||||
動的生成 | ○ | data スキームで可能 | data スキームで可能 (Fx のみ確認) | ||||
ロード時間 | 普通 | 遅い? | ? |
間違いとかあったら教えてもらえると助かります (まとまってなくて指摘しようがないかもしれない…)。