files/ja/tools/web_audio_editor/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

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

<div> </div>

<div class="blockIndicator note">
<p>注意：このツールは廃止予定であり、まもなくFirefoxから削除される予定です。 詳しくは、<a href="/ja/docs/Tools/Deprecated_tools">非推奨ツール</a>を参照してください。</p>
</div>

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

<ul>
 <li>発振回路やデータバッファーによるソースなど、<a href="/ja/docs/Web/API/Web_Audio_API#Defining_audio_sources">オーディオソース</a> を与えるノード</li>
 <li>ディレイやゲイン調整など、<a href="/ja/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">変換処理</a> を行うノード</li>
 <li>スピーカーなど、<a href="/ja/docs/Web/API/Web_Audio_API#Defining_audio_destinations">オーディオストリームの出力先</a> を表すノード</li>
</ul>

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

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

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

<p>このツールはまだ試行段階です。バグを発見した場合は、<a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&amp;component=Developer%20Tools%3A%20Web%20Audio%20Editor">Bugzilla で報告</a>していただければ幸いです。フィードバックや新機能の提案がある場合は、<a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools</a> または <a href="https://twitter.com/firefoxdevtools">Twitter</a> に登録してください。</p>

<h2 id="Opening_the_Web_Audio_Editor" name="Opening_the_Web_Audio_Editor">Web Audio エディターを開く</h2>

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

<ul>
 <li><a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>: マイク入力にさまざまなエフェクトを適用できます。また、その結果を可視化して表示します。</li>
 <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>: マウスポインターの移動に応じて、正弦波のピッチやボリュームを変化させます。</li>
</ul>

<h2 id="Visualizing_the_graph" name="Visualizing_the_graph">グラフの可視化</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/10171/web-audio-editor.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;"></p>

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

<h3 id="Connections_to_AudioParams" name="Connections_to_AudioParams">AudioParam への接続</h3>

<div class="geckoVersionNote">
<p>AudioParam への接続の表示は、Firefox 34 の新機能です。</p>
</div>

<p>ノード間の接続は、実線で表示します。一方、<a href="/ja/docs/Web/API/AudioNode.connect%28AudioParam%29">あるノードと別のノードの AudioParam を接続</a> した場合は、その接続を破線で示して <code>AudioParam</code> の名称を表示します:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/8819/web%20audio-editor-connect-param.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h2 id="Inspecting_and_modifying_AudioNodes" name="Inspecting_and_modifying_AudioNodes">AudioNode の調査と変更</h2>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/10173/web-audio-editor-props.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;"></p>

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

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

<h2 id="Bypassing_nodes" name="Bypassing_nodes">ノードをバイパスする</h2>

<div class="geckoVersionNote">
<p>Firefox 38 の新機能</p>
</div>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/10183/web-audio-editor-on-off.png" style="display: block; height: 97px; margin-left: auto; margin-right: auto; width: 316px;"></p>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/10181/web-audio-editor-bypassed.png" style="display: block; height: 74px; margin-left: auto; margin-right: auto; width: 348px;"></p>