--- title: Web Audio エディター slug: Tools/Web_Audio_Editor tags: - Tools translation_of: Tools/Web_Audio_Editor ---
{{ToolsSidebar}}
 

注意:このツールは廃止予定であり、まもなくFirefoxから削除される予定です。 詳しくは、非推奨ツールを参照してください。

Web Audio API を使うとき、開発者は {{domxref ("AudioContext")}} を生成します。そのコンテキストでは、以下のようないくつもの {{domxref ("AudioNode")}} を構築します:

各々のノードは、ノードの動作を設定するために 0 個以上の {{domxref ("AudioParam")}} プロパティを持ちます。例えば {{domxref ("GainNode")}} は gain プロパティ 1 個を、また {{domxref ("OscillatorNode")}} は frequency プロパティおよび detune プロパティを持っています。

開発者はノードをグラフで接続して、完成したグラフがオーディオストリームの動作を定義します。

Web Audio エディターはページ内で構築したオーディオコンテキストを調査して、そのグラフを可視化します。これはグラフの動作について高レベルなビューを表示して、すべてのノードが想定どおりに接続されていることを確実にできます。そして、グラフ内の各ノードの AudioParam プロパティの調査や編集も可能です。OscillatorNodetype プロパティなど、AudioParam ではないプロパティの一部も、同様に表示や編集が可能です。

このツールはまだ試行段階です。バグを発見した場合は、Bugzilla で報告していただければ幸いです。フィードバックや新機能の提案がある場合は、dev-developer-tools または Twitter に登録してください。

Web Audio エディターを開く

Firefox 32 では、Web Audio エディターはデフォルトで無効化しています。開発ツールのオプション を開いて [Web Audio] にチェックを入れることで有効化できます。有効化すると、ツールボックスのツールバー に [Web Audio] という名前のタブが現れます。タブをクリックして、オーディオコンテキストを構築するページを読み込んでください。デモを 2 つ紹介します:

グラフの可視化

Web Audio エディターが、読み込まれたオーディオコンテキストのグラフを表示します。Violent Theremin のグラフを以下に示します:

ここでは 3 つのノードを使用していることがわかります。ソースとして {{domxref ("OscillatorNode")}}、ボリュームの制御に {{domxref ("GainNode")}}、出力先として {{domxref ("GainNode")}} です。

AudioParam への接続

AudioParam への接続の表示は、Firefox 34 の新機能です。

ノード間の接続は、実線で表示します。一方、あるノードと別のノードの AudioParam を接続 した場合は、その接続を破線で示して AudioParam の名称を表示します:

AudioNode の調査と変更

ノードをクリックすると強調表示して、右側にノード調査ツールを表示します。ここにはノードの AudioParam プロパティの値を一覧表示します。例えば、OscillatorNode がどのようになるかを示します:

Violent Theremin ではユーザーがマウスを左右に動かすのに応じてパラメーター frequency を変えており、それがノード調査ツールに反映されるのを確認できます。ただし、値はリアルタイムには更新されません。更新された値を確認するには、ノードを再度クリックしなければなりません。

ノード調査ツールで値をクリックすると、その値を変更できます。Enter または Tab を押下すると、変更後の値が直ちに反映されます。

ノードをバイパスする

Firefox 38 の新機能

ノードの詳細情報を表示するペインに、オン/オフボタンがあります:

このボタンをクリックするとノードを迂回するようにグラフが変更されますので、ノードの効果がなくなります。迂回されたノードは、背景に斜線が引かれます: