Web Audio Editor は Firefox 32 の新機能です。
Web Audio API を使うとき、開発者は AudioContext
を生成します。そのコンテキストでは、以下のようないくつもの AudioNode
を構築します:
- 発振回路やデータバッファによるソースなど、オーディオソースを与えるノード
- ディレイやゲイン調整など、変換処理を行うノード
- スピーカーなど、オーディオストリームの出力先を表すノード
各々のノードは、ノードの動作を設定するために 0 個以上の AudioParam
プロパティを持ちます。例えば GainNode
は gain
プロパティ 1 個を、また OscillatorNode
は frequency
プロパティおよび detune
プロパティを持っています。
開発者はノードをグラフで接続して、完成したグラフがオーディオストリームの動作を定義します。
Web Audio Editor はページ内で構築したオーディオコンテキストを調査して、そのグラフを可視化します。これはグラフの動作について高レベルなビューを表示して、すべてのノードが想定どおりに接続されていることを確実にできます。そして、グラフ内の各ノードの AudioParam
プロパティの調査や編集も可能です。OscillatorNode
の type
プロパティなど、AudioParam
ではないプロパティの一部も、同様に表示や編集が可能です。
このツールはまだ試行段階です。バグを発見した場合は、Bugzilla で報告していただければ幸いです。フィードバックや新機能の提案がある場合は、ffdevtools.uservoice.com または Twitter に登録してください。
Web Audio Editor を開く
Firefox 32 では、Web Audio Editor はデフォルトで無効化しています。開発ツールのオプションを開いて "Web Audio" にチェックを入れることで有効化できます。有効化すると、ツールボックスのツールバーに "Web Audio" という名前のタブが現れます。タブをクリックして、オーディオコンテキストを構築するページを読み込んでください。デモを 2 つ紹介します:
- Voice-change-O-Matic: マイク入力にさまざまなエフェクトを適用できます。また、その結果を可視化して表示します。
- Violent Theremin: マウスポインタの移動に応じて、正弦波のピッチやボリュームを変化させます。
グラフの可視化
Web Audio Editor が、読み込まれたオーディオコンテキストのグラフを表示します。Violent Theremin のグラフを以下に示します:
ここでは 3 つのノードを使用していることがわかります: ソースとして
OscillatorNode
、ボリュームの制御に GainNode
、出力先として GainNode
です。
AudioParam への接続
AudioParam への接続の表示は、Firefox 34 の新機能です。
ノード間の接続は、実線で表示します。一方、あるノードと別のノードの AudioParam を接続した場合は、その接続を破線で示して AudioParam
の名称を表示します:
AudioNode の調査と変更
ノードをクリックするとハイライトして、右側にノード調査ツールを表示します。ここにはノードの AudioParam
プロパティの値を一覧表示します。例として、OscillatorNode がどのようになるかを示します:
Violent Theremin ではユーザがマウスを左右に動かすのに応じてパラメータ frequency を変えており、それがノード調査ツールに反映されるのを確認できます。ただし、値はリアルタイムには更新されません。更新された値を確認するには、ノードを再度クリックしなければなりません。
ノード調査ツールで値をクリックすると、その値を変更できます。Enter または Tab を押下すると、変更後の値が直ちに反映されます。
ノードをバイパスする
Firefox 38 の新機能
ノードの詳細情報を表示するペインに、オン/オフボタンがあります:
このボタンをクリックするとノードを迂回するようにグラフが変更されますので、ノードの効果がなくなります。迂回されたノードは、背景に斜線が引かれます: