initial commit

4 files changed, 1105 insertions, 0 deletions

diff --git a/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
new file mode 100644
index 0000000000..ed20553589
--- /dev/null
+++ b/files/ja/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.html
@@ -0,0 +1,361 @@
+---
+title: Basic concepts behind Web Audio API
+slug: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
+tags:
+  - Audio
+  - Beginner
+  - Guide
+  - Introduction
+  - Media
+  - Web Audio
+  - Web Audio API
+  - concepts
+  - sound
+  - 初心者
+translation_of: Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API
+---
+<div class="summary">
+<p>この記事では、アプリを経由した音声伝達方法の設計をする際に、十分な情報に基づいた決断をする助けとなるよう、 Web Audio API の特徴がいかに働いているか、その背後にある音声理論について説明します。この記事はあなたを熟練のサウンドエンジニアにさせることはできないものの、Web Audio API が動く理由を理解するための十分な背景を提供します。</p>
+</div>
+
+<h2 id="Audio_graphs" name="Audio_graphs">オーディオグラフ</h2>
+
+<p><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> は、<a href="/ja/docs/Web/API/AudioContext">オーディオコンテキスト</a>内部でのオーディオオペレーションに対するハンドリングを含み、<strong>モジュラールーティング</strong>を可能とするためにデザインされてきました。基本となる音声操作を成す要素は、<strong>オーディオルーチングラフ</strong>を形作るために、互いに接続される<strong>オーディオノード</strong>によります。様々なタイプのチャンネルレイアウトと共に、いくつかの音声源もまた、単一のコンテキスト内部にて支持されています。このモジュラーデザインは、複雑なオーディオ機能を、ダイナミックな音響効果と共に創造するために必要な柔軟性を与えています。</p>
+
+<p>オーディオノードは、それら入出力を経由し接続され、単一あるいは複数の音声源から開始される一連のチェーンを作り、一つ以上のノードを経由しつつ、最終的な行き先に届き終了します。ただし、たとえば、音声データを視覚化することのみを求める場合などは、このような目的地は省いて構いません。シンプルで典型的な Web Audio ワークフローでは、以下のようになります:</p>
+
+<ol>
+ <li>オーディオコンテキストの作成。</li>
+ <li>{{HTMLElement("audio")}} タグ、オシレーター、ストリーム等といった、該当コンテキスト内での音声源の作成。</li>
+ <li>リバーブ、バイカッドフィルター、パンナーコンプレッサーといった、音響効果用ノードの作成。</li>
+ <li>例えばあなたのシステムのスピーカーなど、音声の最終的な行き先の選択。</li>
+ <li>音声効果を（あるのならば）かけた後、最後に選択した行き先へ届いて終了する、音声源からの接続の確立。</li>
+</ol>
+
+<div class="callout-box"><strong>チャンネルの記法</strong>
+
+<p>信号上で利用できるオーディオチャンネルの数字は、2.0 や 5.1 のように、しばしば、数値の形式で表現されます。これは{{interwiki("wikipedia", "Surround_sound#Channel_notation", "channel notation")}}と呼ばれます。最初の数値は、該当の信号が含んでいるオーディオチャンネルの数です。ピリオドの後にある数値は、低音増強用出力として確保されているチャンネルの数を示しています。それらはしばしば<strong>サブウーファー</strong>とも称されます。</p>
+</div>
+
+<p><img alt="A simple box diagram with an outer box labeled Audio context, and three inner boxes labeled Sources, Effects and Destination. The three inner boxes have arrow between them pointing from left to right, indicating the flow of audio information." src="https://mdn.mozillademos.org/files/12237/webaudioAPI_en.svg" style="display: block; height: 143px; margin: 0px auto; width: 643px;"></p>
+
+<p>各入出力は、互いに特定のオーディオレイアウトを代表する、一つ以上のオーディオ<strong>チャンネル</strong>により構成されます。個別のチャンネル構造それぞれは、モノラル、ステレオ、クアッド、5.1等を含んでサポートされています。</p>
+
+<p><img alt="Show the ability of AudioNodes to connect via their inputs and outputs and the channels inside these inputs/outputs." src="https://mdn.mozillademos.org/files/14179/mdn.png" style="display: block; height: 360px; margin: 0px auto; width: 630px;"></p>
+
+<p>音声源はいくつかの方法で取得できます:</p>
+
+<ul>
+ <li>JavaScript内部で(オシレーターのような)オディオノードにより、直接音声を生成。</li>
+ <li>未加工の PCM データから生成(この場合、該当オーディオコンテキストは、対応している音声フォーマット形式へのデコード手段を有しています)。</li>
+ <li>({{HTMLElement("video")}} や {{HTMLElement("audio")}} のような)HTML media elements より取得。</li>
+ <li>(webcam やマイクロフォンのような)<a href="https://developer.mozilla.org/ja/docs/Web/API/WebRTC_API">Web RTC</a> {{domxref("MediaStream")}} により直接取得。</li>
+</ul>
+
+<h2 id="Audio_data_whats_in_a_sample" name="Audio_data_whats_in_a_sample">オーディオデータ: サンプルとは？</h2>
+
+<p>オーディオシグナルのプロセス中では、<strong>サンプリング</strong>とは<a href="https://en.wikipedia.org/wiki/Discrete_time_and_continuous_time">連続的な信号</a>を<a href="Discrete time and continuous time">離散的な信号</a>へ変換することを意味します。あるいは別の言い方をすると、バンドのライブ演奏のような連続的な音波を、コンピューターがその音声を区別されたブロックで処理できるようになる(離散時間信号の)一連のサンプルに変換します。</p>
+
+<p>より詳しい情報は、Wikipedia の <a href="https://ja.wikipedia.org/wiki/%E6%A8%99%E6%9C%AC%E5%8C%96">Sampling(Signal processing)</a>から見ることができます。</p>
+
+<h2 id="Audio_buffers_frames_samples_and_channels" name="Audio_buffers_frames_samples_and_channels">オーディオバッファー: フレーム、サンプル、チャンネルセクション</h2>
+
+<p>{{ domxref("AudioBuffer") }}は、チャンネルの数(モノラルの場合は 1,ステレオの場合は 2、等)、バッファー長すなわちバッファーに格納されているサンプルフレーム数、サンプルレートすなわち 1秒間に再生されるサンプルフレーム数を、そのパラメーターとして持っています。</p>
+
+<p>例として、float32型の値1 つは、(ステレオの場合は左側あるいは右側といった)特定のチャンネルにおいて、各特定時点おけるオーディオストリームの値を表しています。フレームまたはサンプルフレームは、一定時点における、音声を再生する全チャンネル分の値すべてのまとまりです。全チャンネルの全サンプルが一緒に再生されます(ステレオならば 2 チャンネル分、5.1 ならば 6 チャンネル分、等)。</p>
+
+<p>サンプルレートとは、1秒間に再生される、それらサンプルの数(または、1 フレームのサンプルすべてが同時に再生させることから、フレーム)であり、単位は Hz で測定されます。サンプルレートが高まるにつれ、音質は向上します。</p>
+
+<p>モノラルとステレオのオーディオバッファーを見てみましょう。それらは 1秒間、44100Hz で再生されます。</p>
+
+<ul>
+ <li>モノラルバッファーは 44100 サンプル、44100 フレームで構成され、length プロパティは 44100 となる。</li>
+ <li>ステレオバッファーは 88200 サンプル、44100 フレームで構成され、length プロパティは、そのフレーム数に等しいため 44100 のままである。</li>
+</ul>
+
+<p><img alt="A diagram showing several frames in an audio buffer in a long line, each one containing two samples, as the buffer has two channels, it is stereo." src="https://mdn.mozillademos.org/files/14801/sampleframe-english.png" style="height: 150px; width: 853px;"></p>
+
+<p>バッファが再生されると、最も左のサンプルフレームが聞こえ、次にそのサンプルフレームのすぐ隣のサンプルフレームが続いてゆきます。ステレオの場合、両方のチャンネルから同時に聴こえます。サンプルフレームは、チャンネルの数とは独立しているため非常に便利であり、正確に音声を取り扱う有効な手段として、時間を表現してくれます。</p>
+
+<div class="note">
+<p><strong>注: </strong>フレーム数から秒数を得るためには、フレーム数をサンプルレートで単に除算するだけです。サンプル数からフレーム数を得るためには、チャンネル数で単に除算するだけです。</p>
+</div>
+
+<p>以下はいくつかの単純なサンプルです:</p>
+
+<pre class="brush: js notranslate">var context = new AudioContext();
+var buffer = context.createBuffer(2, 22050, 44100);</pre>
+
+<div class="note">
+<p><strong>注:</strong> <a href="https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B8%E3%82%BF%E3%83%AB%E3%82%AA%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA">デジタルオーディオに</a>おいて、<strong>44100</strong><a href="https://ja.wikipedia.org/wiki/%E3%83%98%E3%83%AB%E3%83%84">Hz</a>(<strong>44.1kHz</strong> とも表記される)は一般的な<a href="https://ja.wikipedia.org/wiki/%E6%A8%99%E6%9C%AC%E5%8C%96">サンプリング周波数</a>です。なぜ 44.1kHz なのでしょう？<br>
+ <br>
+ 第一に、人間の耳の<a href="https://en.wikipedia.org/wiki/Hearing_range">可聴範囲</a>は、大雑把に 20 から 20000Hz の範囲です。<a href="https://ja.wikipedia.org/wiki/%E6%A8%99%E6%9C%AC%E5%8C%96%E5%AE%9A%E7%90%86">Nyquist-Shannon のサンプリング定理</a>により、サンプリング周波数は再現したい最大周波数の 2倍以上でなくてはなりません。したがって、サンプリングレートは 40kHz以上でなくてはなりません。<br>
+ <br>
+ 第二に、シグナルはサンプリング前に、<a href="https://ja.wikipedia.org/wiki/%E6%8A%98%E3%82%8A%E8%BF%94%E3%81%97%E9%9B%91%E9%9F%B3">偽信号</a>の発生をさせないため、<a href="https://ja.wikipedia.org/wiki/%E3%83%AD%E3%83%BC%E3%83%91%E3%82%B9%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF">ローパスフリタリング</a>されていなければなりません。理想的ローパスフィルターが 20kHz以下の周波数を(減衰させずに)完璧に通し、20kHz以上の周波数を完璧に遮断する一方で、実際には、周波数が部分的に減衰する場所となる、<a href="https://en.wikipedia.org/wiki/Transition_band">トランジションバンド</a>が必要です。このバンドが広くなるにつれ、<a href="https://en.wikipedia.org/wiki/Anti-aliasing_filter">減衰フィルター</a>を作るのは簡単かつ効率的になります。44.1kHz サンプリング周波数は、2.05kHz のトランジションバンドを与えます。</p>
+</div>
+
+<p>この呼び出しをする場合、チャンネル数2 のステレオバッファーを取得し、AudioContext 上で(非常に一般的で、通常のサウンドカードではほとんどはレートとなる)44100Hz にて再生される音源が、0.5秒間続きます: 22050 フレーム/44100Hz = 0.5 秒。</p>
+
+<pre class="brush: js notranslate">var context = new AudioContext();
+var buffer = context.createBuffer(1, 22050, 22050);</pre>
+
+<p>この呼び出しをする場合、モノラルバッファーをチャンネル数1 で取得し、AudioContext 上で 44100Hz にて再生される際に自動で 44100Hz へ<em>再サンプリングされ</em>(したがって 44100 フレームとなり)、1秒間続きます: 44100 フレーム/44100Hz = 1 秒。</p>
+
+<div class="note">
+<p><strong>注</strong>: オーディオの再サンプリングは、画像のサイズ変更と非常に似たものです。例えば 16x16 の画像があり、32x32 のスペースを満たしたいとします。サイズ変更(あるいは再サンプリング)を行い、結果として(サイズ変更アルゴリズムの違いに依存して、ぼやけたりエッジができたりと)画質の低下を伴いますが、スペースを減らすサイズ変更済み画像が作れます。再サンプリングされたオーディオもまったく同じです。スペースを保てるものの、実際には高音域のコンテンツや高音を適切に再現することはできません。</p>
+</div>
+
+<h3 id="Planar_versus_interleaved_buffers" name="Planar_versus_interleaved_buffers">バッファーセクションの平面性対交差性</h3>
+
+<p>Web AudioAPI は平面的なバッファー形式を採用しています。左右のチャンネルは、以下のように格納されています:</p>
+
+<pre class="notranslate">LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR (for a buffer of 16 frames)</pre>
+
+<p>これは音声処理における一般的な形式です: これにより各チャンネルの独立した処理が簡単になります。</p>
+
+<p>代わりの方式としては、交差的な形式が用いられます:</p>
+
+<pre class="notranslate">LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (for a buffer of 16 frames)</pre>
+
+<p>この形式は、大掛かりな処理を必要としない音声を、格納し再生する目的として一般的です。例えばデコード済み MP3音楽ストリームなどがあります。<br>
+ <br>
+ Web Audio API は、音声処理に適することを理由に、平面的なバッファー<strong>のみ</strong>を採用しています。通常は平面的ですが、再生用に音声がサウンドカードへ送られる際は、交差的に変換されます。反対に、MP3音声がデコードされる場合、元々は交差形式だったものの、音声処理のため平面形式へと変換されます。</p>
+
+<h2 id="Audio_channels" name="Audio_channels">オーディオチャンネル</h2>
+
+<p>異なるオーディオバッファーでは、それぞれ異なった数のチャンネルを含んでいます: より基本的なモノラルとステレオ(それぞれチャンネル数1 と 2)から始まり、より複雑なクアッドもしくは 5.1 のような、異なるサウンドサンプルが各チャンネルに含まれ、よりリッチな音声体験を導くセットもあります。チャンネルは通常、以下のテーブルに示される、標準的な略語によって示されます:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td><em>Mono</em></td>
+   <td><code>0: M: mono</code></td>
+  </tr>
+  <tr>
+   <td><em>Stereo</em></td>
+   <td><code>0: L: left<br>
+    1: R: right</code></td>
+  </tr>
+  <tr>
+   <td><em>Quad</em></td>
+   <td><code>0: L: left<br>
+    1: R: right<br>
+    2: SL: surround left<br>
+    3: SR: surround right</code></td>
+  </tr>
+  <tr>
+   <td><em>5.1</em></td>
+   <td><code>0: L: left<br>
+    1: R: right<br>
+    2: C: center<br>
+    3: LFE: subwoofer<br>
+    4: SL: surround left<br>
+    5: SR: surround right</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Up-mixing_and_down-mixing" name="Up-mixing_and_down-mixing">アップミキシングとダウンミキシング</h3>
+
+<p>入力と出力のチャンネル数が一致しない場合、以下のルールに基づいてアップミキシングまたはダウンミキシングが行われます。これは{{domxref("AudioNode.channelInterpretation")}} プロパティを <code>speakers</code> または <code>discrete</code> へとセットしてコントロールできます。</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="row">説明</th>
+   <th scope="col">入力チャンネル</th>
+   <th scope="col">出力チャンネル</th>
+   <th scope="col">ミキシングルール</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th colspan="1" rowspan="13" scope="row"><code>speakers</code></th>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><em>モノラルからステレオへのアップミックス。</em><br>
+    <code>M</code>入力チャンネルは(<code>L</code> と <code>R</code> の)両出力チャンネル用に使われます。<br>
+    <code>output.L = input.M<br>
+    output.R = input.M</code></td>
+  </tr>
+  <tr>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>モノラルからクアッドへのアップミックス。</em><br>
+    <code>M</code> 入力チャンネルは(<code>L</code> と <code>R</code> の)ノンサラウンド出力チャンネル用に使われます。(<code>SL</code> と <code>SR</code> の)サラウンド出力チャンネルは無音です。<br>
+    <code>output.L = input.M<br>
+    output.R = input.M<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>モノラルから 5.1.へのアップミックス。</em><br>
+    <code>M</code> 入力チャンネルは(<code>C</code> の)ノン中央出力チャンネル用に使われます。その他すべての(<code>L</code>, <code>R</code>, <code>LFE</code>, <code>SL</code>, <code>SR</code>)出力チャンネルは無音です。<br>
+    <code>output.L = 0<br>
+    output.R = 0</code><br>
+    <code>output.C = input.M<br>
+    output.LFE = 0<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>モノラルからステレオへのダウンミックス。</em>&gt;<br>
+    (<code>L</code> と <code>R</code> の)両入力チャンネルは等しく結合され、単一出力チャンネル(<code>M</code>)になります。<br>
+    <code>output.M = 0.5 * (input.L + input.R)</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>ステレオからクアッドへのアップミックス。</em><br>
+    左右(<code>L</code> と <code>R</code>)入力チャンネルはそれぞれ(<code>L</code> と <code>R</code> の)ノンサラウンド出力チャンネル用に使われます。(<code>SL</code> と <code>SR</code> の)サラウンド出力チャンネルは無音です。<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>ステレオから 5.1.へのアップミックス。</em><br>
+    左右(<code>L</code> と <code>R</code>)入力チャンネルはそれぞれ(<code>L</code> と <code>R</code> の)ノンサラウンド出力チャンネル用に使われます。(<code>SL</code> と <code>SR</code> の)サラウンド出力チャンネル、中央チャンネル(<code>C</code>)、サブウーファー(<code>LFE</code>)はすべて同様に無音です。<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.C = 0<br>
+    output.LFE = 0<br>
+    output.SL = 0<br>
+    output.SR = 0</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>クアッドからモノラルへのダウンミックス。</em><br>
+    (<code>L</code>, <code>R</code>, <code>SL</code>, <code>SR</code>)入力チャンネルは等しく結合され、単一出力チャンネル(<code>M</code>)になります。<br>
+    <code>output.M = 0.25 * (input.L + input.R + input.SL + input.SR)</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><em>クアッドからステレオへのダウンミックス。両左入力チャンネル</em><br>
+    (<code>L</code> と <code>SL</code>)は等しく結合され、単一左出力チャンネル(<code>L</code>)になります。同様に、<em>両右入力チャンネル</em>(<code>R</code> と <code>SR</code>)は等しく結合され、単一右出力チャンネル(<code>R</code>)になります。<br>
+    <code>output.L = 0.5 * (input.L + input.SL</code><code>)</code><br>
+    <code>output.R = 0.5 * (input.R + input.SR</code><code>)</code></td>
+  </tr>
+  <tr>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><em>クアッドから 5.1.へのアップミックス。</em><br>
+    (<code>L</code>, <code>R</code>, <code>SL</code>, <code>SR</code>)入力チャンネルはそれぞれ(<code>L</code> と <code>R</code> の)出力チャンネル用に使われます。中央チャンネル(<code>C</code>)、サブウーファー(<code>LFE</code>)は無音です。<br>
+    <code>output.L = input.L<br>
+    output.R = input.R<br>
+    output.C = 0<br>
+    output.LFE = 0<br>
+    output.SL = input.SL<br>
+    output.SR = input.SR</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>1</code> <em>(Mono)</em></td>
+   <td><em>5.1.からモノラルへのダウンミックス。左チャンネル</em>(<code>L</code>, <code>SL</code>)、右チャンネル(<code>R</code>, <code>SR</code>)、中央チャンネルはそれぞれ混合されます。サラウンドチャンネルは僅かに減衰され、標準側面チャンネルは利用のために、単一チャンネルを<code>√2/2</code> で乗算したものとして出力が補強されます。サブウーファー<code>(LFE)</code>チャンネルは失われます。<br>
+    <code>output.M = 0.7071 * (input.L + input.R) + input.C + 0.5 * (input.SL + input.SR)</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>2</code> <em>(Stereo)</em></td>
+   <td><em>5.1.からステレオへのダウンミックス。</em><br>
+    中央チャンネルは各側面サラウンドチャンネル(<code>SL</code> と <code>SR</code>)と合算され、各側面チャンネルへ混合されます。2 チャンネルへとミックスダウンされる過程は低労力で行われ、各々の場合について、<code>√2/2</code> で乗算されます。サブウーファー (<code>LFE</code>) チャンネルは失われます。<br>
+    <code>output.L = input.L + 0.7071 * (input.C + input.SL)<br>
+    output.R = input.R </code><code>+ 0.7071 * (input.C + input.SR)</code></td>
+  </tr>
+  <tr>
+   <td><code>6</code> <em>(5.1)</em></td>
+   <td><code>4</code> <em>(Quad)</em></td>
+   <td><em>5.1.からクアッドへのダウンミックス。</em><br>
+    中央チャンネルは各側面ノンサラウンドチャンネル(<code>L</code> と <code>R</code>)と合算され、各側面チャンネルへ混合されます。2 チャンネルへとミックスダウンされる過程は低労力で行われ、各々の場合について、<code>√2/2</code> で乗算されます。サラウンドチャンネルへの伝達には変化がありません。サブウーファー (<code>LFE</code>) チャンネルは失われます。<br>
+    <code>output.L = input.L + 0.7071 * input.C<br>
+    output.R = input.R + 0.7071 * input.C<br>
+    <code>output.SL = input.SL<br>
+    output.SR = input.SR</code></code></td>
+  </tr>
+  <tr>
+   <td colspan="2" rowspan="1">その他、非標準レイアウト</td>
+   <td>非標準チャンネルレイアウトは <code>channelInterpretation</code> を <code>discrete</code> へセットしたものとして操作されます。<br>
+    新たなスピーカーレイアウトの将来的な定義を、仕様書でははっきりと認めています。従ってこの予備部分は、チャンネルに用いられる特定の数字が示すブラウザーの挙動が、将来的に変更された場合のために用意されたものではありません。</td>
+  </tr>
+  <tr>
+   <th colspan="1" rowspan="2" scope="row"><code>discrete</code></th>
+   <td rowspan="1">各 (<code>x</code>)</td>
+   <td rowspan="1">各 (<code>y</code>) (<code>x&lt;y</code> の場合)</td>
+   <td><em>離散チャンネルのアップミックス。</em><br>
+    各出力チャンネルに、それに対応する同番号の入力チャンネルによる入力をします。対応する入力チャンネルが存在しないチャンネルは無音になります。</td>
+  </tr>
+  <tr>
+   <td rowspan="1">各 (<code>x</code>)</td>
+   <td rowspan="1">各 (<code>y</code>) (<code>x&gt;y</code> の場合)</td>
+   <td><em>離散チャンネルのダウンミックス。</em><br>
+    各出力チャンネルに、それに対応する同番号の入力チャンネルによる入力をします。対応する出力チャンネルが存在しない入力チャンネルは無視されます。</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Visualizations" name="Visualizations">視覚化</h2>
+
+<p>原則、オーディオ視覚化は出力オーディオデータ(基本的にはゲインまたは周波数データ)に時間毎にアクセスすることで行われ、更にグラフなどの視覚化出力へ渡すためのグラフィカル技術が用いられます。Web Audio API は {{domxref("AnalyserNode")}} で、経由して渡されたオーディオ信号を変換せず利用することができます。ただしその出力は、{{htmlelement("canvas")}} などのような視覚化技術へ受け渡せるオーディオデータです。</p>
+
+<p><img alt="Without modifying the audio stream, the node allows to get the frequency and time-domain data associated to it, using a FFT." src="https://mdn.mozillademos.org/files/12521/fttaudiodata_en.svg" style="height: 206px; width: 693px;"></p>
+
+<p>以下のメソッドを利用して、データの取得が可能です。</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatFrequencyData()")}}</dt>
+ <dd>現在の周波数データを渡された {{domxref("Float32Array")}} 型配列にコピーします。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getByteFrequencyData()")}}</dt>
+ <dd>現在の周波数データを渡された {{domxref("Uint8Array")}} 型配列(符号なしバイト配列)にコピーします。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("AnalyserNode.getFloatTimeDomainData()")}}</dt>
+ <dd>現在の波形データまたはタイムドメインデータを渡された{{domxref("Float32Array")}}型配列にコピーします。</dd>
+ <dt>{{domxref("AnalyserNode.getByteTimeDomainData()")}}</dt>
+ <dd>現在の波形データまたはタイムドメインデータを渡された{{domxref("Uint8Array")}}型配列(符号なしバイト配列)にコピーします。</dd>
+</dl>
+
+<div class="note">
+<p><strong>注</strong>: より詳しい情報は、Web Audio API記事中の <a href="/ja/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Visualizations with Web Audio API</a> を参照してください。</p>
+</div>
+
+<h2 id="Spatialisations" name="Spatialisations">立体化</h2>
+
+<div>
+<p>(Web Audio API の {{domxref("PannerNode")}} と {{domxref("AudioListener")}} ノードによって操作される)立体音響化によって、オーディオシグナルの、空間を介した点における位置や振る舞いをモデル化することができ、その音声をリスナーが聞くことができます。</p>
+
+<p>パンナーの位置は、直行座標の右側に描かれています。ドップラー効果を作るに必要な、速度ベクトルを用いた移動、そして方向コーンを用いた方向性があります。このコーンは、例えば無指向性音源などのため、とても大きくなり得ます。</p>
+</div>
+
+<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/12511/pannernode_en.svg" style="height: 340px; width: 799px;"></p>
+
+<div>
+<p>リスナーの位置は、直行座標の右側に描かれています。度ベクトルを用いた移動と、リスナーの頭がポイントされている(頭部側と顔面側の)二方向ベクターを用いた方向性があります。これらはそれぞれリスナーの頭部の頂点からの方向と、リスナーの鼻にポイントされている方向とを定義しており、これらは直角となっています。</p>
+</div>
+
+<p><img alt="We see the position, up and front vectors of an AudioListener, with the up and front vectors at 90° from the other." src="https://mdn.mozillademos.org/files/14311/WebAudioListenerReduced.png" style="display: block; margin: 0 auto;"></p>
+
+<div class="note">
+<p><strong>注</strong>: より詳しい情報は、<a href="/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web audio spatialization basics</a> を参照してください。</p>
+</div>
+
+<h2 id="Fan-in_and_Fan-out" name="Fan-in_and_Fan-out">ファンインとファンアウト</h2>
+
+<p>オーディオ用語では、<strong>fan-in</strong> は{{domxref("ChannelMergerNode")}} が一連の単一入力ソースを受け、単一マルチチャンネル信号を出力するプロセスを意味します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12517/fanin.svg" style="height: 258px; width: 325px;"></p>
+
+<p><strong>Fan-out</strong> はその対となるプロセスを意味します。{{domxref("ChannelSplitterNode")}} が一つのマルチチャンネル入力源を受け、複数のモノラル出力信号を出力します。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12515/fanout.svg" style="height: 258px; width: 325px;"></p>
diff --git a/files/ja/web/api/web_audio_api/index.html b/files/ja/web/api/web_audio_api/index.html
new file mode 100644
index 0000000000..f20265eeac
--- /dev/null
+++ b/files/ja/web/api/web_audio_api/index.html
@@ -0,0 +1,301 @@
+---
+title: Web Audio API
+slug: Web/API/Web_Audio_API
+tags:
+  - API
+  - Audio
+  - Example
+  - Landing
+  - Overview
+  - Web Audio API
+  - sound
+translation_of: Web/API/Web_Audio_API
+---
+<div>{{DefaultAPISidebar("Web Audio API")}}</div>
+
+<p class="summary">Web Audio API はウェブ上で音声を扱うための強力で多機能なシステムを提供します。これにより開発者は音源を選択したり、エフェクトを加えたり、ビジュアライゼーションを加えたり、パンニングなどの特殊効果を適用したり、他にもたくさんのいろいろなことができるようになります。</p>
+
+<h2 id="Web_audio_concepts_and_usage" name="Web_audio_concepts_and_usage">Web audio の概念と利用方法</h2>
+
+<p>Web Audio API は音声操作を<strong>オーディオコンテキスト</strong>内の操作として実現し、モジュラールーティングできるようにデザインされています。基本的な操作は <strong>オーディオノード</strong>として表現されています。これを接続することで、オーディオグラフを作成します。チャンネル構成の異なる複数の音源も 1 つのコンテキスト内で扱えます。この構成によって、複雑で動的な音声操作を実現できるようになっています。</p>
+
+<p>オーディオノードは、入力と出力によってチェーンと単純なウェブにリンクされています。通常、1 つまたは複数の音源から始まります。音源は、非常に小さなタイムスライス、多くの場合は 1秒間に数万個のサウンドインテンシティ (サンプル) の配列を提供します。これらは数学的に計算されたもの ({{domxref("OscillatorNode")}} など) や、音声ファイルや動画ファイル ({{domxref("AudioBufferSourceNode")}} や {{domxref("MediaElementAudioSourceNode")}} など) やオーディオストリーム ({{domxref("MediaStreamAudioSourceNode")}}) からの録音である場合もあります。実際には、サウンドファイルは、マイクや電気楽器から入ってきた音の強さそのものを録音したものであり、それがミックスされて一つの複雑な波になっています。</p>
+
+<p>ノードの出力は他のノードの入力に紐付けられます。つまり、入力ストリームにミックスや編集をして他へ出力できるわけです。一般的な編集の例としては音量の変更です( {{domxref("GainNode")}} )。意図した効果を十分に施したあと、ユーザーに音声を聞かせたい場合、サウンドをスピーカーやヘッドオンに流すために、{{domxref("AudioContext.destination")}} の入力に紐付ける必要があります。</p>
+
+<p>簡潔で通常の Web Audio の使い方は次のようになります:</p>
+
+<ol>
+ <li>オーディオコンテキストを作成する</li>
+ <li>コンテキストの中で、<code>&lt;audio&gt;</code>,オシレーター,ストリームなどの音源を作成する</li>
+ <li>リバーブ・フィルター・パンナー・コンプレッサーなどのエフェクトノードを作成する</li>
+ <li>最終的な音声の到達先を選ぶ(例えばスピーカー)</li>
+ <li>音源をエフェクトに繋げ、エフェクトを到達先(destination)に繋げる</li>
+</ol>
+
+<p><img alt="オーディオコンテキストと書かれた外側のボックスと、音源、エフェクト、デスティネーションと書かれた3つのボックスからなるシンプルなボックスダイアグラムです。3つのボックスの間には矢印があり、オーディオ情報の流れを示しています。" src="https://mdn.mozillademos.org/files/16043/audio-context_.png" style="height: 400px; width: 1200px;"></p>
+
+<p>タイミングは高精度で低遅延に制御されます。正確にイベントに反応したり特定の音声サンプルにアクセスしたりすることができます。ドラムマシンやシーケンサーのようなアプリケーションを作ることができます。</p>
+
+<p>Web Audio API では、立体音響を制御することもできます。<em>ソースリスナーモデル</em>に基づいたシステムを使用することで、<em>パンモデル</em>を制御し、音源の移動 (またはリスナーの移動) によって引き起こされる<em>距離に起因する減衰</em>を処理することができます。</p>
+
+<div class="note">
+<p>Web Audio API の理論に関する詳細は <a href="/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Basic concepts behind Web Audio API</a> をご覧ください。</p>
+</div>
+
+<h2 id="Web_Audio_API_target_audience" name="Web_Audio_API_target_audience">Web Audio API がターゲットとする人</h2>
+
+<p>Web Audio API は音声技術に馴染みがない人にとって、怖気づくかもしれません。また、多くの機能があるため、開発者にとってとっつきにくいものになっています。</p>
+
+<p>Web Audio API の用途としては、<a href="https://www.futurelibrary.no/">futurelibrary.no</a> のような雰囲気作りのためや<a href="https://css-tricks.com/form-validation-web-audio/">フォームの検証に音を活用</a>するために、単に音声をウェブサイトに組み込むために使用できます。一方で、高度な対話型ツールの作成にも利用できます。こうしたことを踏まえると、開発者とミュージシャンの双方に適していると言えます。</p>
+
+<p>プログラミングは得意だけど API の構造と用語の解説が必要な人のために、<a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">簡単なチュートリアル</a>があります。</p>
+
+<p>また、<a href="/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Web Audio API の背景にある基本理念</a>に関する記事もあり、特にこの API の範囲でデジタルオーディオがどのように動作するのかを理解するのに役立ちます。また API の基礎となる優れた概念の紹介も含んでいます。</p>
+
+<p>プログラムを書く作業はカードゲームに例えられます。ルールを学んで遊んでみて、またルールを学んで再び遊んでみて・・・。したがって最初のチュートリアルと記事を見たあとにピンとこなかった場合、最初のチュートリアルを拡張して、学んだことを実践して、段階的に高度なことを学んでいく<a href="/ja/docs/Web/API/Web_Audio_API/Advanced_techniques">発展的なチュートリアル</a>があります。</p>
+
+<p>それとは別に、この API のすべての機能を網羅したチュートリアルとリファレンスを用意しています。このページのサイドバーを参照してください。</p>
+
+<p><span class="tlid-translation translation" lang="ja">音楽的な側面に精通し、音楽理論の概念に精通し、楽器の構築を開始したい場合は</span>、発展的チュートリアルやその他の解説を基に制作に移る事ができるでしょう(上記のリンク付きチュートリアルでは、スケジューリングに関する注意事項、オーダーメイドの発振器やエンベロープの作成、LFO などについて説明しています) 。</p>
+
+<p>プログラミングの基本に慣れていない場合は、まず初級者向けの JavaScript チュートリアルを参照してから、このページに戻ってください。<a href="/ja/docs/Learn/JavaScript">初級者向けの JavaScript学習モジュール</a>を参照してください。</p>
+
+<h2 id="Web_Audio_API_interfaces" name="Web_Audio_API_interfaces">Web Audio API インターフェイス</h2>
+
+<p>Web Audio API は全部で 28 のインターフェイスと関連するイベントを持ちます。それらは機能的に 9 個のカテゴリに分けられます。</p>
+
+<h3 id="General_audio_graph_definition" name="General_audio_graph_definition">一般的なオーディオグラフの定義</h3>
+
+<p>Web Audio API で利用するオーディオグラフのコンテナと、その構成要素は以下の通りです。</p>
+
+<dl>
+ <dt>{{domxref("AudioContext")}}</dt>
+ <dd>音声モジュールを組み合わせて作成される、音声処理のグラフを表します。グラフ内の各モジュールは {{domxref("AudioNode")}} として表現されています。オーディオコンテキストは、コンテキスト内での処理を担当するノードの作成を行います。</dd>
+ <dt>{{domxref("AudioContextOptions")}}</dt>
+ <dd><code><strong>AudioContextOptions</strong></code> は <code>AudioContext</code> を作成するときにオプションを渡したいときに使用します。</dd>
+ <dt>{{domxref("AudioNode")}}</dt>
+ <dd><strong><code>AudioNode</code></strong> インターフェイスは音声処理のモジュールの表現しています。これには{{HTMLElement("audio")}}要素や{{HTMLElement("video")}} 要素のような音源、音声の出力先、{{domxref("BiquadFilterNode")}} や {{domxref("GainNode")}}) のようなフィルターなどが含まれます。</dd>
+ <dt>{{domxref("AudioParam")}}</dt>
+ <dd><strong><code>AudioParam</code></strong> インターフェイスは {{domxref("AudioNode")}} の持つような、音声に関するパラメータを表現しています。値をセットするだけでなく、差分を指定することも可能です。また指定した時間やパターンで、値を変更をすることもできます。</dd>
+ <dt>{{domxref("AudioParamMap")}}</dt>
+ <dd>{{domxref("AudioParam")}} のマップのようなインターフェイスを提供します。つまり <code>forEach()</code>、<code>get()</code>、<code>has()</code>、<code>keys()</code>、<code>values()</code> メソッドや <code>size</code> プロパティが使えます。</dd>
+ <dt>{{domxref("BaseAudioContext")}}</dt>
+ <dd><strong><code>BaseAudioContext</code></strong> インターフェイスはオンライン音声処理グラフ( {{domxref("AudioContext")}})やオフライン音声処理グラフ( {{domxref("OfflineAudioContext")}})の基底となるものです。直接 <code>BaseAudioContext</code> を使うことはなく、これを継承するこれら 2 つのインターフェイスを介して使用します。</dd>
+ <dt>{{event("ended_(Web_Audio)", "ended")}} (event)</dt>
+ <dd><code>ended</code> イベントは、再生が終了した際に発火するイベントです。</dd>
+</dl>
+
+<h3 id="Defining_audio_sources" name="Defining_audio_sources">音源の定義</h3>
+
+<p>Web Audio API 内で利用できる音源は以下の通りです。</p>
+
+<dl>
+ <dt>{{domxref("AudioScheduledSourceNode")}}</dt>
+ <dd><strong><code>AudioScheduledSourceNode</code></strong> は {{domxref("AudioNode")}} の一種で、いくつかの音源ノードの親インターフェイスです。</dd>
+ <dt>{{domxref("OscillatorNode")}}</dt>
+ <dd><strong><code style="font-size: 14px;">OscillatorNode</code></strong> はサイン波を出力する {{domxref("AudioNode")}} です。出力する波形の周波数を指定できます。</dd>
+ <dt>{{domxref("AudioBuffer")}}</dt>
+ <dd> <strong><code>AudioBuffer</code></strong> はメモリー上に展開された短い音声データを表します。{{ domxref("AudioContext.createBuffer()") }} によって音声ファイルから、もしくは{{ domxref("AudioContext.createBuffer()") }} メソッドによって生データから作成されます。このデータは {{ domxref("AudioBufferSourceNode") }} を利用して再生されます。</dd>
+ <dt>{{domxref("AudioBufferSourceNode")}}</dt>
+ <dd><strong><code>AudioBufferSourceNode</code></strong> は {{domxref("AudioNode")}} の一種で、メモリー上の音声データを利用した音源です。音声データ自身は {{domxref("AudioBuffer")}} として保存されています。</dd>
+ <dt>{{domxref("MediaElementAudioSourceNode")}}</dt>
+ <dd><code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> は {{domxref("AudioNode")}} の一種で、{{ htmlelement("audio") }} 要素や {{ htmlelement("video") }} 要素を利用する音源です。</dd>
+ <dt>{{domxref("MediaStreamAudioSourceNode")}}</dt>
+ <dd><code><strong>MediaStreamAudio</strong></code><strong><code>SourceNode</code></strong> は {{domxref("AudioNode")}} の一種で、マイクや Web カメラといった <a href="/ja/docs/WebRTC" title="/ja/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} からの入力を扱える音源です。複数の音声トラックがストリーム上にある場合、{{domxref("MediaStreamTrack.id", "id")}} は辞書順(アルファベット順)です。</dd>
+ <dt>{{domxref("MediaStreamTrackAudioSourceNode")}}</dt>
+ <dd><code>MediaStreamTrackAudioSourceNode</code> は{{domxref("AudioNode")}} の一種で、{{domxref("MediaStreamTrack")}} からの入力を扱える音源です。{{domxref("AudioContext.createMediaStreamTrackSource", "createMediaStreamTrackSource()")}} メソッドによって作られたノードの場合、使用するトラックを指定してください。<code>MediaStreamAudioSourceNode</code> 以上の制御を提供します。</dd>
+</dl>
+
+<h3 id="Defining_audio_effects_filters" name="Defining_audio_effects_filters">オーディオエフェクトフィルターの定義</h3>
+
+<p>これらを利用すると、音源からの音声にエフェクトをかけられます。</p>
+
+<dl>
+ <dt>{{domxref("BiquadFilterNode")}}</dt>
+ <dd><strong><code>BiquadFilterNode</code></strong> は {{domxref("AudioNode")}} の一種で、単純な低次フィルターです。フィルターやトーンコントロール、グラフィックイコライザで利用されます。<code>BiquadFilterNode</code> の入力と出力はともに 1 つです。</dd>
+ <dt>{{domxref("ConvolverNode")}}</dt>
+ <dd><code><strong>Convolver</strong></code><strong><code>Node</code></strong> は<span style="line-height: 1.5;">{{domxref("AudioNode")}} の一種で、Audiobuffer に対して線形畳み込みを行います。リバーブの実現に利用されます。</span></dd>
+ <dt>{{domxref("DelayNode")}}</dt>
+ <dd><strong><code>DelayNode</code></strong> は {{domxref("AudioNode")}} の一種で、<a href="http://en.wikipedia.org/wiki/Digital_delay_line" title="http://en.wikipedia.org/wiki/Digital_delay_line">delay-line</a> を表します。入力された音声を、遅らせて出力します。</dd>
+ <dt>{{domxref("DynamicsCompressorNode")}}</dt>
+ <dd><strong><code>DynamicsCompressorNode</code></strong> はコンプレッサとして働きます。大きな音の音量を絞ることで、複数の音を同時に再生した時に起きがちな、音のクリッピングや歪みを回避します。</dd>
+ <dt>{{domxref("GainNode")}}</dt>
+ <dd><strong><code>GainNode</code></strong> は {{domxref("AudioNode")}} の一種で、入力された音の音量を指定されたものに変更して出力します。</dd>
+ <dt>{{domxref("WaveShaperNode")}}</dt>
+ <dd><strong><code>WaveShaperNode</code></strong> は {{domxref("AudioNode")}} の一種で、非線形のディストーションエフェクトを実現します。curve 属性に指定された関数を用いて、入力を歪ませます。音を歪ませ、温かみを与えるために用いられます。</dd>
+ <dt>{{domxref("PeriodicWave")}}</dt>
+ <dd>{{ domxref("OscillatorNode") }} の出力の波形を変えるために用いられます。</dd>
+ <dt>{{domxref("IIRFilterNode")}}</dt>
+ <dd>一般的な<a href="https://ja.wikipedia.org/wiki/%E7%84%A1%E9%99%90%E3%82%A4%E3%83%B3%E3%83%91%E3%83%AB%E3%82%B9%E5%BF%9C%E7%AD%94">無限インパルス応答(IIR)</a>フィルターの実装です。トーン制御デバイスやグラフィックイコライザーの実装に利用できます。</dd>
+</dl>
+
+<h3 id="Defining_audio_destinations" name="Defining_audio_destinations">音声の出力先の定義</h3>
+
+<p>処理した音声の出力先を、以下のもので定めます。</p>
+
+<dl>
+ <dt>{{domxref("AudioDestinationNode")}}</dt>
+ <dd><strong><code>AudioDestinationNode</code></strong> はコンテキスト内での出力先を表します。通常はスピーカとなっています。</dd>
+ <dt>{{domxref("MediaStreamAudioDestinationNode")}}</dt>
+ <dd><code><strong>MediaElementAudio</strong></code><strong><code>SourceNode</code></strong> は音声の出力先となる {{domxref("AudioNode")}} の一種で、<a href="/ja/docs/WebRTC" title="/ja/docs/WebRTC">WebRTC</a> {{domxref("MediaStream")}} と 1 つの <code>AudioMediaStreamTrack</code> から構成されます。{{ domxref("Navigator.getUserMedia") }} で取得された MediaStream と同様に扱えます。</dd>
+</dl>
+
+<h3 id="Data_analysis_and_visualization" name="Data_analysis_and_visualization">分析と可視化</h3>
+
+<p>音声の時間領域 / 周波数領域分析には、<code>AnalyserNode</code> を利用します。</p>
+
+<dl>
+ <dt>{{domxref("AnalyserNode")}}</dt>
+ <dd><strong><code>AnalyserNode</code></strong> を利用すると、音声のリアルタイムに時間領域分析と周波数領域分析が行えます。これを利用すると、音声の可視化が行えます。</dd>
+</dl>
+
+<h3 id="Splitting_and_merging_audio_channels" name="Splitting_and_merging_audio_channels">オーディオチャンネルの分岐と合成</h3>
+
+<p>オーディオチャンネルを分岐したり合成したりするのにこれらのインターフェイスを使います。</p>
+
+<dl>
+ <dt>{{domxref("ChannelSplitterNode")}}</dt>
+ <dd>The <code><strong>ChannelSplitterNode</strong></code> は音源の複数のチャンネルを別々のモノラル出力へ分離します。</dd>
+ <dt>{{domxref("ChannelMergerNode")}}</dt>
+ <dd><code><strong>ChannelMergerNode</strong></code> は異なるモノラルの入力を、1 つの出力へとまとめます。それぞれの入力は、出力内のチャンネルとなります。</dd>
+</dl>
+
+<h3 id="Audio_spatialization" name="Audio_spatialization">立体音響</h3>
+
+<p>これらのインターフェイスを使用すると、立体音響のパンニング効果を音源に追加することができます。</p>
+
+<dl>
+ <dt>{{domxref("AudioListener")}}</dt>
+ <dd><strong><code>AudioListener</code></strong> インターフェイスは聴者の向きと位置を表します。</dd>
+ <dt>{{domxref("PannerNode")}}</dt>
+ <dd><strong><code>PannerNode</code></strong> は {{domxref("AudioNode")}} の一種で、空間内での音の振る舞いを規定します。位置はカルテシアンの右手座標系で表され、速度ベクトルで動きを表します。向きはコーンの向きで表現します。</dd>
+ <dt>{{domxref("StereoPannerNode")}}</dt>
+ <dd><code><strong>StereoPannerNode</strong></code> インターフェイスは単純なステレオプランナーで、音声ストリームのパン(左右バランス)を調整できます。</dd>
+</dl>
+
+<h3 id="Audio_processing_in_JavaScript" name="Audio_processing_in_JavaScript">JavaScript による音声処理</h3>
+
+<p>音声Worklet を使うことで、JavaScript や <a href="/ja/docs/WebAssembly">WebAssembly</a> を使って自作の{{domxref("AudioNode")}}を定義できます。音声Worklet は {{domxref("Worklet")}} インターフェイスという軽量版 {{domxref("Worker")}} インターフェイスを実装しています。Chrome 66 以降で既定で有効です。</p>
+
+<dl>
+ <dt>{{domxref("AudioWorklet")}} {{experimental_inline}}</dt>
+ <dd><code>AudioWorklet</code> インターフェイスは {{domxref("AudioContext")}} オブジェクトの {{domxref("BaseAudioContext.audioWorklet", "audioWorklet")}} を通して利用することができ、メインスレッドから実行されるオーディオワークレットにモジュールを追加することができます。</dd>
+ <dt>{{domxref("AudioWorkletNode")}} {{experimental_inline}}</dt>
+ <dd><code>AudioWorkletNode</code> インターフェイスは {{domxref("AudioNode")}} の一種で、音声グラフに組み込んだり、対応する <code>AudioWorkletProcessor</code> にメッセージを送信できます。</dd>
+ <dt>{{domxref("AudioWorkletProcessor")}} {{experimental_inline}}</dt>
+ <dd><code>AudioWorkletProcessor</code> インターフェイスは <code>AudioWorkletGlobalScope</code> で実行する音声処理コードで、音声の生成・処理・分析を直接行ったり、対応する <code>AudioWorkletNode</code> にメッセージを送信できます。</dd>
+ <dt>{{domxref("AudioWorkletGlobalScope")}} {{experimental_inline}}</dt>
+ <dd><code>AudioWorkletGlobalScope</code> インターフェイスは <code>WorkletGlobalScope</code> から派生するオブジェクトで、音声処理スクリプトが実行されるワーカーコンテキストを表現します。メインスレッド上ではなく、ワークレットスレッド上で JavaScript を使って直接オーディオデータの生成、処理、分析ができるように設計されています。</dd>
+</dl>
+
+<h4 id="Obsolete_script_processor_nodes" name="Obsolete_script_processor_nodes">Obsolete: script processor nodes</h4>
+
+<p>音声Worklet が定義されるよりも昔、Web Audio API は JavaScript を使用する音声処理に <code>ScriptProcessorNode</code> を利用していました。しかしながら処理がメインスレッドで走るためにパフォーマンスが良くありませんでした。歴史的な理由から <code>ScriptProcessorNode</code> は維持されていますが非推奨であり、将来の規格から取り除かれる予定です。</p>
+
+<dl>
+ <dt>{{domxref("ScriptProcessorNode")}} {{deprecated_inline}}</dt>
+ <dd><strong><code>ScriptProcessorNode</code></strong> を利用すると、JavaScript から音声データの生成、処理、分析を行えます。このノードは {{domxref("AudioNode")}} の一種で、入力と出力の二つのバッファとリンクしています。入力バッファに新しいデータがセットされる度に {{domxref("AudioProcessingEvent")}} インターフェイスを実装したイベントが生起します。イベントハンドラは出力バッファにデータをセットして処理を終了します。</dd>
+ <dt>{{event("audioprocess")}} (event) {{deprecated_inline}}</dt>
+ <dd><code>audioprocess</code> イベントは {{domxref("ScriptProcessorNode")}} の処理が可能になった際に発火します。</dd>
+ <dt>{{domxref("AudioProcessingEvent")}} {{deprecated_inline}}</dt>
+ <dd><code>AudioProcessingEvent</code> は {{domxref("ScriptProcessorNode")}} の入力バッファが処理可能になったことを表すイベントです。</dd>
+</dl>
+
+<h3 id="Offlinebackground_audio_processing" name="Offlinebackground_audio_processing">オフライン / バックグラウンドでの処理</h3>
+
+<p>以下のようにすると、バックグラウンドでオーディオグラフを非常に高速に処理/レンダリングし、端末のスピーカーではなく {{domxref("AudioBuffer")}} にレンダリングすることができます。</p>
+
+<dl>
+ <dt>{{domxref("OfflineAudioContext")}}</dt>
+ <dd><strong><code>OfflineAudioContext</code></strong> は {{domxref("AudioContext")}} の一種で、{{domxref("AudioNode")}} を組み合わせて、音声処理を行うグラフを表現しています。通常の <code>AudioContext </code> と異なり<code>、</code><code>OfflineAudioContext</code> は音声を出力せず、バッファ内で高速に処理を行います。</dd>
+ <dt>{{event("complete")}} (event)</dt>
+ <dd><code>complete</code> イベントは {{domxref("OfflineAudioContext")}} の処理が終了した時に発火します。</dd>
+ <dt>{{domxref("OfflineAudioCompletionEvent")}}</dt>
+ <dd><code>OfflineAudioCompletionEvent</code> は {{domxref("OfflineAudioContext")}} の処理が終了したことを表します。{{event("complete")}} イベントは、これを実装しています。</dd>
+</dl>
+
+<h2 id="Obsolete_interfaces" name="Obsolete_interfaces">廃止されたインターフェイス</h2>
+
+<p>以下のものは、Web Audio API の古い仕様には存在しましたが、現在は廃止され、別のものに置き換えられています。</p>
+
+<dl>
+ <dt>{{domxref("JavaScriptNode")}}</dt>
+ <dd>JavaScript で音声を直接処理できます。廃止され、{{domxref("ScriptProcessorNode")}} に置き換えられています。</dd>
+ <dt>{{domxref("WaveTableNode")}}</dt>
+ <dd>定期的な波形変換を行います。廃止され {{domxref("PeriodicWave")}} に置き換えられています。</dd>
+</dl>
+
+<h2 id="Guides_and_tutorials" name="Guides_and_tutorials">ガイドとチュートリアル</h2>
+
+<p>{{LandingPageListSubpages}}</p>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>GitHub の <a href="https://github.com/mdn/webaudio-examples/">webaudio-example</a> に多数の例が掲載されています。</p>
+
+<h2 id="Specifications" name="Specifications">仕様書</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">仕様書</th>
+   <th scope="col">状態</th>
+   <th scope="col">備考</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Audio API')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+
+<div>
+<h3 id="AudioContext" name="AudioContext">AudioContext</h3>
+
+<div>
+<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
+
+<p>{{Compat("api.AudioContext", 0)}}</p>
+</div>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<h3 id="Tutorialsguides" name="Tutorialsguides">チュートリアル/ガイド</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API">Web Audio API の背後にある基本概念</a></li>
+ <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API の使用</a></li>
+ <li><a href="/ja/docs/Web/API/Web_Audio_API/Advanced_techniques">Advanced techniques: creating sound, sequencing, timing, scheduling</a></li>
+ <li><a href="/ja/docs/Web/Media/Autoplay_guide">メディアおよびウェブオーディオ API の自動再生ガイド</a></li>
+ <li><a href="/ja/docs/Web/API/Web_Audio_API/Using_IIR_filters">Using IIR filters</a></li>
+ <li><a href="/ja/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">Web Audio API による視覚化</a></li>
+ <li><a href="/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+ <li><a href="/ja/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Controlling multiple parameters with ConstantSourceNode</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/positional_audio/" title="http://www.html5rocks.com/tutorials/webaudio/positional_audio/">Mixing Positional Audio and WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/tutorials/webaudio/games/" title="http://www.html5rocks.com/tutorials/webaudio/games/">Developing Game Audio with the Web Audio API</a></li>
+ <li><a href="/ja/docs/Web/API/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext" title="/ja/docs/Web_Audio_API/Porting_webkitAudioContext_code_to_standards_based_AudioContext">Porting webkitAudioContext code to standards based AudioContext</a></li>
+</ul>
+
+<h3 id="Libraries" name="Libraries">ライブラリ</h3>
+
+<ul>
+ <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li>
+ <li><a href="https://tonejs.github.io/">Tone.js</a>: a framework for creating interactive music in the browser.</li>
+ <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://webaudio.github.io/web-audio-api/">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li>
+ <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li>
+ <li><a href="https://korilakkuma.github.io/XSound/">XSound</a>: Web Audio API Library for Synthesizer, Effects, Visualization, Recording ... etc</li>
+ <li><a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: HTML5 video language lab web application using the Web Audio API to record and combine video and audio from different sources into a single file (<a class="external external-icon" href="https://github.com/chrisjohndigital/OpenLang">source on GitHub</a>)</li>
+ <li><a href="https://ptsjs.org/">Pts.js</a>: Simplifies web audio visualization (<a href="https://ptsjs.org/guide/sound-0800">guide</a>)</li>
+</ul>
+
+<h3 id="Related_topics" name="Related_topics">関連トピック</h3>
+
+<ul>
+ <li><a href="/ja/docs/Web/Media">Web media technologies</a></li>
+ <li><a href="/ja/docs/Web/Media/Formats">Guide to media types and formats on the web</a></li>
+</ul>
diff --git a/files/ja/web/api/web_audio_api/using_web_audio_api/index.html b/files/ja/web/api/web_audio_api/using_web_audio_api/index.html
new file mode 100644
index 0000000000..762a202893
--- /dev/null
+++ b/files/ja/web/api/web_audio_api/using_web_audio_api/index.html
@@ -0,0 +1,252 @@
+---
+title: Web Audio API の使用
+slug: Web/API/Web_Audio_API/Using_Web_Audio_API
+tags:
+  - API
+  - Audio
+  - Guide
+  - Playback
+  - Using
+  - Web
+  - Web Audio
+  - Web Audio API
+  - basics
+  - sound
+  - ガイド
+  - 再生
+  - 音声
+translation_of: Web/API/Web_Audio_API/Using_Web_Audio_API
+---
+<div>{{DefaultAPISidebar("Web Audio API")}}</div>
+
+<p class="summary" id="webaudioapibasics"><span class="seoSummary"><a href="/ja/docs/Web/API/Web_Audio_API">Web Audio API</a> の入門を見てみましょう。ここではいくつかの概念を短く確認してから、簡単な boombox の例で、音声トラックの読み込み、再生と一時停止、音量やステレオ位置の変更の方法を学びましょう。</span></p>
+
+<p>Web Audio API は {{HTMLElement("audio")}} メディア要素を置き換えるものではなく、むしろその機能を補完するものであり、 {{HTMLElement("canvas")}} が {{HTMLElement("img")}} 要素と並行して存在するのと似ています。どちらを利用するかは、その目的によります。音声トラックの再生を制御したいだけであれば、 <code>&lt;audio&gt;</code> メディア要素の方がよりよく、 Web Audio API よりも早く解決できるでしょう。再生だけでなくもっと複雑な音声処理が必要であれば、 Web Audio API ははるかに強力な制御を行うことができます。</p>
+
+<p>Web Audio API の強力な要素の一つは、厳格な「音声の呼び出しの制限」がないことです。例えば、同時に32音や64音などの上限はありません。プロセッサーの能力があれば、1,000以上の音を詰まることなく再生することもできます。</p>
+
+<h2 id="Example_code" name="Example_code">コード例</h2>
+
+<p>boombox の外見は次の通りです。</p>
+
+<p><img alt="boombox の外見で、再生、パン、音量コントロールがあります" src="https://mdn.mozillademos.org/files/16197/boombox.png" style="border-style: solid; border-width: 1px; height: 646px; width: 1200px;"></p>
+
+<p>これは古いカセットデッキで、再生ボタンがあり、音量とステレオ位置を変更することができる音量とパンのスライダーがあります。なお、もっと複雑にすることもできますが、この段階で簡単に学ぶには理想的なものです。</p>
+
+<p><a href="https://codepen.io/Rumyra/pen/qyMzqN/">こちらから最終的なデモを Codepen で確認する</a>か、<a href="https://github.com/mdn/webaudio-examples/tree/master/audio-basics">ソースコードを GitHub で</a>見るかしてください。</p>
+
+<h2 id="ブラウザーの対応">ブラウザーの対応</h2>
+
+<p>最新のブラウザーは Web Audio API のほとんどの機能によく対応しています。 API の機能はたくさんありますので、もっと正確な情報は、各リファレンスページのブラウザー互換性一覧表をチェックする必要があるでしょう。</p>
+
+<h2 id="Audio_graphs" name="Audio_graphs">音声グラフ</h2>
+
+<p>Web Audio API の中にあるすべてのものは音声グラフの概念に基づいており、ノードから成っています。</p>
+
+<p>Web Audio API は<strong>音声コンテキスト</strong>に含まれる音声操作を扱い、<strong>モジューラールーティング</strong>が作れるように設計されています。基本的な音声の編集は<strong>音声ノード</strong>で行われ、それは互いに結びつき、<strong>音声ルーティンググラフ</strong>を構成します。加工する音を入力する入力ノード、望み通りに音を加工する加工ノード、音を保存したり聴いたりすることができる出力ノード (出力先) から成ります。</p>
+
+<p>それぞれの音声ソースは、単一のコンテキストであっても、異なるチャンネルレイアウトに対応しています。このモジュラー設計によって、動的な効果を持つ複雑なオーディオ関数を作成することができます。</p>
+
+<h2 id="Audio_context" name="Audio_context">音声コンテキスト</h2>
+
+<p>Web Audio API で何かをすることができるようにするには、音声コンテキストのインスタンスを作成する必要があります。この後で、 API のすべての機能にアクセスすることができます。</p>
+
+<pre class="brush: js">// 古いブラウザー向け
+const AudioContext = window.AudioContext || window.webkitAudioContext;
+
+const audioContext = new AudioContext();
+</pre>
+
+<p>これを実行するとどうなるのでしょうか。 {{domxref("BaseAudioContext")}} が自動的に生成され、オンライン音声コンテキストに拡張されます。これを行うのは、ライブサウンドを再生しようとしているからです。</p>
+
+<div class="note">
+<p><strong>メモ</strong>: 音声データを処理したいだけ、例えば、バッファリングとストリーミングのみを行い再生するのでなければ、 {{domxref("OfflineAudioContext")}} を作成するようにしたほうが良いかもしれません。</p>
+</div>
+
+<h2 id="Loading_sound" name="Loading_sound">音声の読み込み</h2>
+
+<p>作成した音声コンテキストには、そこで再生する音声が必要になります。これを行う API は少ししかありません。簡単な方法で始めてみましょう — boombox を使うと、曲のトラック全体を再生するのが普通です。また、アクセシビリティのために、そのトラックを DOM に公開したほうがいいしょう。このページの曲を公開するために {{htmlelement("audio")}} 要素を使用します。</p>
+
+<pre class="brush: html">&lt;audio src="myCoolTrack.mp3" type="audio/mpeg"&gt;&lt;/audio&gt;
+</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: 読み込もうとしている音声ファイルが別なドメインにある場合は、 <code>crossorigin</code> 属性を使用する必要があるでしょう。詳しくは<a href="/ja/docs/Web/HTTP/CORS">オリジン間リソース共有 (CORS)</a>  を参照してください。</p>
+</div>
+
+<p>Web Audio API を使用してできるすばらしいことをすべて利用するためには、この要素で入力元をつかみ、作成したコンテキストに<em>送り込む</em>ことが必要です。幸いにもちょうどこれを行うメソッド — {{domxref("AudioContext.createMediaElementSource")}} が存在します。</p>
+
+<pre class="brush: js">// get the audio element
+const audioElement = document.querySelector('audio');
+
+// pass it into the audio context
+const track = audioContext.createMediaElementSource(audioElement);
+</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: 上記の <code>&lt;audio&gt;</code> 要素は DOM 内では {{domxref("HTMLMediaElement")}} 型のオブジェクトで表され、これは独自の機能のセットを持っています。これらはすべてそのままです。 Web Audio API で音声を利用できるようにするだけです。</p>
+</div>
+
+<h2 id="Controlling_sound" name="Controlling_sound">音声の制御</h2>
+
+<p>ウェブ上で音声を再生するとき、ユーザーが制御できるようにすることが重要です。目的によって無数の選択肢がありますが、ここでは音声の再生と一時停止、トラックの音量と左右のパンの変更の機能を提供します。</p>
+
+<p>JavaScript コードからプログラム的に音声を制御することは、ブラウザーの自動再生の対応方針の影響を受けますので、ユーザー (またはホワイトリスト) の許可がないとブロックされる場合があります。自動再生の方針は通常、明示的な許可かスクリプトが音声を再生できるようになる前のユーザーのページへの反応を必要とします。</p>
+
+<p>これらの特別な要件が基本的に設定されているのは、予想外の音が迷惑で邪魔になり、アクセシビリティの問題を引き起こす可能性があるためです。これについては、記事<a href="/ja/docs/Web/Media/Autoplay_guide">メディアと Web Audio API の自動再生ガイド</a>をご覧ください。</p>
+
+<p>このスクリプトはユーザー入力イベント (例えば再生ボタンのクリック) への応答で音声を再生しているため、良い形であり自動再生ブロックの問題はないでしょう。ですから、再生や一時停止機能についての話を始めましょう。再生ボタンはトラックの再生中には一時停止ボタンに変わります。</p>
+
+<pre class="brush: html">&lt;button data-playing="false" role="switch" aria-checked="false"&gt;
+    &lt;span&gt;Play/Pause&lt;/span&gt;
+&lt;/button&gt;
+</pre>
+
+<p>トラックを再生する前に、音声グラフを音声ソースまたは入力ノードから出力先へ接続する必要があります。</p>
+
+<p>既に入力ノードについては、 audio 要素を API に渡すことで作成しました。ほとんどの場合は、出力ノード作成する必要はなく、他のノードを {{domxref("BaseAudioContext.destination")}} へ接続するだけです。</p>
+
+<pre class="brush: js">track.connect(audioContext.destination);
+</pre>
+
+<p>これらのノードを図示するのによい方法は、音声グラフを描画することです。これは現在の音声グラフの見え方を表します。</p>
+
+<p><img alt="an audio graph with an audio element source connected to the default destination" src="https://mdn.mozillademos.org/files/16195/graph1.jpg" style="border-style: solid; border-width: 1px; height: 486px; width: 1426px;"></p>
+
+<p>これで再生と一時停止機能を追加できるようになりました。</p>
+
+<pre class="brush: js">// select our play button
+const playButton = document.querySelector('button');
+
+playButton.addEventListener('click', function() {
+
+    // check if context is in suspended state (autoplay policy)
+    if (audioContext.state === 'suspended') {
+        audioContext.resume();
+    }
+
+    // play or pause track depending on state
+    if (this.dataset.playing === 'false') {
+        audioElement.play();
+        this.dataset.playing = 'true';
+    } else if (this.dataset.playing === 'true') {
+        audioElement.pause();
+        this.dataset.playing = 'false';
+    }
+
+}, false);
+</pre>
+
+<p>また、トラックの再生が終了したらどうするかを考慮しておく必要があります。 <code>HTMLMediaElement</code> は <code>ended</code> イベントを再生終了時に一度発生させるので、これを待ち受けして関連するコードを実行します。</p>
+
+<pre class="brush: js">audioElement.addEventListener('ended', () =&gt; {
+    playButton.dataset.playing = 'false';
+}, false);
+</pre>
+
+<h2 id="Modifying_sound" name="Modifying_sound">音の加工</h2>
+
+<p>基本的な加工ノードを追加して、音を変化させてみましょう。これは Web Audio API が本当に役立ち始めるところです。まず最初に、音量を変化させてみましょう。これは音の波がどれだけ大きいかを表す {{domxref("GainNode")}} を使用すれば実現できます。</p>
+
+<p>Web Audio API でノードを作成することができる方法は二通りあります。コンテキスト自身のファクトリメソッド (例えば <code>audioContext.createGain()</code>) を使用するか、ノードのコンストラクター (例えば <code>new GainNode()</code>) です。ここではファクトリメソッドを使用します。</p>
+
+<pre class="brush: js">const gainNode = audioContext.createGain();
+</pre>
+
+<p>音声グラフを以前のものから更新する必要があり、入力を gain に接続してから、 gain ノードを出力先に接続します。</p>
+
+<pre class="brush: js">track.connect(gainNode).connect(audioContext.destination);
+</pre>
+
+<p>これで音声グラフはこのようになります。</p>
+
+<p><img alt="an audio graph with an audio element source, connected to a gain node that modifies the audio source, and then going to the default destination" src="https://mdn.mozillademos.org/files/16196/graph2.jpg" style="border-style: solid; border-width: 1px; height: 550px; width: 1774px;"></p>
+
+<p>gain の既定値は1です。これは現在の音量を同じに維持します。 gain は最小値がおよそ-3.4で最大値はおよそ3.4です。ここで boombox は gain を最大2 (元の音量の倍)、最小0 (結果的に音声をミュートします) の範囲で動かせるようにします。</p>
+
+<p>ユーザーがこれを制御できるようにしましょう。 — <a href="/ja/docs/Web/HTML/Element/input/range">range 入力</a>を使用します。</p>
+
+<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="2" value="1" step="0.01"&gt;
+</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: range 入力は、音声ノードの値を更新するのに実に手軽な入力型です。 range の値を音声ノードの引数に直接設定したり、使用したりすることができます。</p>
+</div>
+
+<p>それでは、ユーザーが値を変更したときに入力された値を取得して gain の値を更新するようにしましょう。</p>
+
+<pre class="brush: js">const volumeControl = document.querySelector('#volume');
+
+volumeControl.addEventListener('input', function() {
+    gainNode.gain.value = this.value;
+}, false);
+</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: ノードオブジェクトの値 (例えば <code>GainNode.gain</code>) は単純な値ではなく、実際には {{domxref("AudioParam")}} 型のオブジェクト — これが引数と呼ばれています。なぜかといえば、 <code>GainNode.gain</code> の <code>value</code> プロパティを設定しなければならず、 <code>gain</code> を直接設定するだけではないからです。これによってはるかに柔軟になり、例えば特定の値のセットを引数で渡して、一定の期間にわたって変化させたりすることができます。</p>
+</div>
+
+<p>素晴らしい、ユーザーがトラックの音量を追更新できるようになりました。ミュート機能を追加したい場合も gain ノードは完全なノードです。</p>
+
+<h2 id="Adding_stereo_panning_to_our_app" name="Adding_stereo_panning_to_our_app">アプリにステレオ位置を追加</h2>
+
+<p>学んだことを練習するために、もう一つの加工ノードを追加してみましょう。</p>
+
+<p>ユーザーがステレオ機能を持っている場合、左右のスピーカーの間で音のバランスを変更する {{domxref("StereoPannerNode")}} ノードがあります。</p>
+
+<p><strong>メモ</strong>: <code>StereoPannerNode</code> は、左右間のステレオパンを行う単純な用途のためのものです。 {{domxref("PannerNode")}} というものもあり、こちらはもっと複雑な効果を生成するための、 3D 空間や音声の<em>空間化</em>などを大幅に制御することができます。これはゲームや 3D アプリなどで使用され、例えば頭上を飛ぶ鳥や、ユーザーの背後から聞こえる音などを生成します。</p>
+
+<p>図示すると、音声グラフは次のようになります。</p>
+
+<p><img alt="入力ノード、2つの加工ノード (gain ノードと stereo panner ノード)、出力ノードを示した音声グラフを表す図です。" src="https://mdn.mozillademos.org/files/16229/graphPan.jpg" style="border-style: solid; border-width: 1px; height: 532px; width: 2236px;"></p>
+
+<p>今回はノードを作成するコンストラクターメソッドを使用しましょう。この方法では、コンテキストとその特定のノードが取るオプションを渡す必要があります。</p>
+
+<pre class="brush: js">const pannerOptions = { pan: 0 };
+const panner = new StereoPannerNode(audioContext, pannerOptions);
+</pre>
+
+<div class="note">
+<p><strong>メモ</strong>: ノードを作成するコンストラクターメソッドは、いまのところすべてのブラウザーで対応されている訳ではありません。古いファクトリメソッドの方がより広く対応されています。</p>
+</div>
+
+<p>個々の値の範囲は -1 (はるか左) と 1 (はるか右) の間です。今回も range 型の入力でこの引数を変更できるようにしましょう。</p>
+
+<pre class="brush: html">&lt;input type="range" id="panner" min="-1" max="1" value="0" step="0.01"&gt;
+</pre>
+
+<p>以前行ったのと同じ方法で、この入力から得た値を使ってパンの値を調整します。</p>
+
+<pre class="brush: js">const pannerControl = document.querySelector('#panner');
+
+pannerControl.addEventListener('input', function() {
+    panner.pan.value = this.value;
+}, false);
+</pre>
+
+<p>また音声グラフを調整して、すべてのノードを互いに接続しましょう。</p>
+
+<pre class="brush: js">track.connect(gainNode).connect(panner).connect(audioContext.destination);
+</pre>
+
+<p>アプリに行うべき残りの作業はについては、<a href="https://codepen.io/Rumyra/pen/qyMzqN/">こちらから Codepen 上で最終的なデモを確認して</a>みてください。</p>
+
+<h2 id="Summary" name="Summary">まとめ</h2>
+
+<p>素晴らしい！ boombox が出来上がり、「テープ」を再生したり、音量やステレオ位置を調整したりできるようにするために、かなり基本的な音声グラフの作業を行いました。</p>
+
+<p>これは、音声をウェブサイトやウェブアプリに追加するために始める必要がある基本事項のかなりの部分を構成しています。 Web Audio API にはさらに多くの機能がありますが、ノードの概念を把握し、音声グラフをまとめると、より複雑な機能を見に行くことができます。</p>
+
+<h2 id="More_examples" name="More_examples">他の例</h2>
+
+<p>Web Audio API についてもっと学ぶことができる他の例があります。</p>
+
+<p><a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-matic</a> は、楽しい音声加工および音の視覚化を行うウェブアプリで、様々な効果や視覚化を選択することができます。このアプリケーションはかなり初歩的ですが、 Web Audio API の複数の機能を同時に使用する例を示しています。 (<a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic をライブで実行</a>)</p>
+
+<p><img alt="音の波が表示され、音声効果や視覚化を選択することができるユーザーインターフェイス。" src="https://mdn.mozillademos.org/files/7921/voice-change-o-matic.png" style="border-style: solid; border-width: 1px; display: block; height: 500px; margin: 0px auto; width: 640px;"></p>
+
+<p>他にも特に Web Audio API を紹介するために開発されたアプリケーションとして <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a> があり、これはマウスポインターを動かすことで音高や音量を変更することができるシンプルなウェブアプリケーションです。これはサイケデリックなライトショーも提供します。 (<a href="https://github.com/mdn/violent-theremin">Violent Theremin のソースコードを見る</a>)</p>
+
+<p><img alt="虹色に埋め尽くされたページで、 Clear screen と mute と書かれた2つのボタンがあります。" src="https://mdn.mozillademos.org/files/7919/violent-theremin.png" style="border-style: solid; border-width: 1px; display: block; height: 458px; margin: 0px auto; width: 640px;"></p>
+
+<p>他にも例としては <a href="https://github.com/mdn/webaudio-examples">webaudio-examples リポジトリ</a>を参照してください。</p>
diff --git a/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
new file mode 100644
index 0000000000..dcc39d13f2
--- /dev/null
+++ b/files/ja/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
@@ -0,0 +1,191 @@
+---
+title: Visualizations with Web Audio API
+slug: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+tags:
+  - API
+  - Web Audio API
+  - analyser
+  - fft
+  - visualization
+  - waveform
+translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
+---
+<div class="summary">
+<p>Web Audio API の最も興味深い機能の 1 つは、オーディオソースから周波数、波形、その他のデータを抽出し、それを使用してビジュアライゼーションを作成する機能です。この記事では、方法について説明し、いくつかの基本的な使用例を示します。</p>
+</div>
+
+<div class="note">
+<p><strong>付記</strong>: すべてのコードスニペットの実際の例は、<a href="https://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> のデモでご覧いただけます。</p>
+</div>
+
+<h2 id="Basic_concepts" name="Basic_concepts">基本的な概念</h2>
+
+<p>オーディオソースからデータを抽出するには {{ domxref("AudioContext.createAnalyser()") }} メソッドを使用して作成された {{ domxref("AnalyserNode") }} が必要です。 例:</p>
+
+<pre class="brush: js">var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+var analyser = audioCtx.createAnalyser();
+</pre>
+
+<p>このノードは、ソースと destination の間のある時点でオーディオソースに接続されます。例:</p>
+
+<pre class="brush: js">source = audioCtx.createMediaStreamSource(stream);
+source.connect(analyser);
+analyser.connect(distortion);
+distortion.connect(audioCtx.destination);</pre>
+
+<div class="note">
+<p><strong>付記</strong>: 入力がソースに対し、直接または別のノードを介して接続されているかぎり、アナライザの出力を別のノードに接続する必要はありません。</p>
+</div>
+
+<p>アナライザノードは、{{domxref("AnalyserNode.fftSize")}}プロパティ値（指定されていない場合は、デフォルトは 2048 です）として指定する内容に応じて、特定の周波数ドメインで高速フーリエ変換（fft）を使用してオーディオデータをキャプチャします。</p>
+
+<div class="note">
+<p><strong>付記</strong>: {{domxref("AnalyserNode.minDecibels")}}と{{domxref("AnalyserNode.maxDecibels")}}を使用して、fft データスケーリング範囲の最小値と最大値を指定することもできます。{{domxref("AnalyserNode.smoothingTimeConstant")}}。それらの使い方の詳細については、それらのページをお読みください。</p>
+</div>
+
+<p>データを取得するには、周波数データを取得するために{{domxref("AnalyserNode.getFloatFrequencyData()")}}および{{domxref("AnalyserNode.getByteFrequencyData()")}}メソッドを使用する必要があります。{{domxref("AnalyserNode.getByteTimeDomainData()")}}と{{domxref(" AnalyserNode.getFloatTimeDomainData()")}}を使用して波形データを取得します。</p>
+
+<p>これらのメソッドはデータを指定された配列にコピーするので、データを受け取る前に新しい配列を作成して呼び出す必要があります。最初のものは 32 ビットの浮動小数点数を生成し、2番目と 3番目のものは 8 ビットの符号なし整数を生成するため、標準の JavaScript配列ではなく、扱うデータに応じて{{domxref("Float32Array")}}または {{domxref("Uint8Array")}}配列を使う必要があります。</p>
+
+<p>たとえば、2048 の fft サイズを扱っているとします、fft の半分である{{domxref("AnalyserNode.frequencyBinCount")}}の値を返し、frequencyBinCount を引数として Uint8Array()を呼び出します。これがその fft サイズで収集するデータポイントの数です。</p>
+
+<pre class="brush: js">analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);</pre>
+
+<p>実際にデータを取得して配列にコピーするには、配列を引数として渡して、必要なデータ収集メソッドを呼び出します。 例:</p>
+
+<pre class="brush: js">analyser.getByteTimeDomainData(dataArray);</pre>
+
+<p>オーディオデータを配列に取り込んだ時点で可視化することができます。たとえば、HTML5 {{htmlelement("canvas")}}にプロットすることができます。</p>
+
+<p>いくつかの具体例を見てみましょう。</p>
+
+<h2 id="Creating_a_waveformoscilloscope" name="Creating_a_waveformoscilloscope">波形/オシロスコープの作成</h2>
+
+<p>オシロスコープのビジュアライゼーション（ <a href="https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L123-L167">Voice-change-O-matic</a> の元のコードの <a href="http://soledadpenades.com/">Soledad Penadés</a> に感謝します）を作成するには、前のセクションで説明した標準パターンに従って、バッファを設定します。</p>
+
+<pre class="brush: js">analyser.fftSize = 2048;
+var bufferLength = analyser.frequencyBinCount;
+var dataArray = new Uint8Array(bufferLength);</pre>
+
+<p>次に、新しいビジュアライゼーションディスプレイの準備をするために、先に描画されたキャンバスをクリアします。</p>
+
+<pre class="brush: js">canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>ここで <code>draw()</code> 関数を定義します。</p>
+
+<pre class="brush: js">function draw() {</pre>
+
+<p>ここで <code>requestAnimationFrame()</code> を使用して、描画関数が開始後にループを維持します。</p>
+
+<pre class="brush: js">var drawVisual = requestAnimationFrame(draw);</pre>
+
+<p>次に、TimeDomainData を取得し、配列にコピーします。</p>
+
+<pre class="brush: js">analyser.getByteTimeDomainData(dataArray);</pre>
+
+<p>次に、初期値としてキャンバスを単色で塗りつぶします。</p>
+
+<pre class="brush: js">canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>描画する波の線幅と線の色を設定し、パスを描画します。</p>
+
+<pre class="brush: js">canvasCtx.lineWidth = 2;
+canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
+canvasCtx.beginPath();</pre>
+
+<p>キャンバスの幅を配列の長さ(先ほど定義した frequencyBinCount と等しい)で除算することによって描かれる線の各セグメントの幅を決定し、次に、変数 x を定義して、パスの各セグメントを描画するために移動する位置を定義します。</p>
+
+<pre class="brush: js">var sliceWidth = WIDTH * 1.0 / bufferLength;
+var x = 0;</pre>
+
+<p>次にループを実行して、バッファ内の各ポイントの波の小さなセグメントの位置を、配列からのデータポイント値に基づいて特定の高さに定義し、線を次の波セグメントが描画されるべき場所に移動させます。</p>
+
+<pre class="brush: js">      for(var i = 0; i &lt; bufferLength; i++) {
+
+        var v = dataArray[i] / 128.0;
+        var y = v * HEIGHT/2;
+
+        if(i === 0) {
+          canvasCtx.moveTo(x, y);
+        } else {
+          canvasCtx.lineTo(x, y);
+        }
+
+        x += sliceWidth;
+      }</pre>
+
+<p>最後に、キャンバスの右端の途中で線を終え、次に定義した線を描画します。</p>
+
+<pre class="brush: js">      canvasCtx.lineTo(canvas.width, canvas.height/2);
+      canvasCtx.stroke();
+    };</pre>
+
+<p>このコードの最後では、 <code>draw()</code> 関数を呼び出してプロセス全体を開始します。</p>
+
+<pre class="brush: js">    draw();</pre>
+
+<p>これにより、1秒に数回更新する素晴らしい波形表示が得られます。</p>
+
+<p><img alt="a black oscilloscope line, showing the waveform of an audio signal" src="https://mdn.mozillademos.org/files/7977/wave.png" style="display: block; height: 96px; margin: 0px auto; width: 640px;"></p>
+
+<h2 id="Creating_a_frequency_bar_graph" name="Creating_a_frequency_bar_graph">周波数棒グラフの作成</h2>
+
+<p>次に作成する素敵な小さなサウンドビジュアライゼーションは、Winamp のような周波数棒グラフの 1 つです。私たちは Voice-change-O-matic で入手できるものを持っています。それがどのように行われたかを見てみましょう。</p>
+
+<p>まず、アナライザとデータ配列を設定し、<code>clearRect()</code> で現在のキャンバス表示を消去します。これまでの唯一の違いは、fft サイズをもっと小さくすることです。これは、グラフの各バーを細い一筋ではなくバーのように見えるほど大きくするためです。</p>
+
+<pre class="brush: js">analyser.fftSize = 256;
+var bufferLength = analyser.frequencyBinCount;
+console.log(bufferLength);
+var dataArray = new Uint8Array(bufferLength);
+
+canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>次に、<code>draw()</code> 関数をオフにし、<code>requestAnimationFrame()</code> でループを設定して、表示されたデータが更新されるようにしてから、各アニメーションフレームで表示をクリアします。</p>
+
+<pre class="brush: js">    function draw() {
+      drawVisual = requestAnimationFrame(draw);
+
+      analyser.getByteFrequencyData(dataArray);
+
+      canvasCtx.fillStyle = 'rgb(0, 0, 0)';
+      canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);</pre>
+
+<p>今度はバーの幅をキャンバスの幅をバーの数で割った値（バッファの長さ）に等しくなるように設定します。しかし、その幅を 2.5倍にしています。なぜなら、毎日聞いている音の大部分が特定の低い周波数帯にあるので、ほとんどの周波数がその中にオーディオを持たないものとして戻ってくるからです。空の棒グラフを表示したくないので、棒の位置をずらして、意味のある高さを持つものでキャンバスの表示を埋めます。</p>
+
+<p>そして、変数 <code>barHeight</code> と、現在のバーを描画する画面上の横位置を記録する変数 <code>x</code> を設定します。</p>
+
+<pre class="brush: js">var barWidth = (WIDTH / bufferLength) * 2.5;
+var barHeight;
+var x = 0;</pre>
+
+<p>前と同じように、for ループを開始し、<code>dataArray</code> の各値について繰り返します。それぞれの値について、<code>barHeight</code> を配列の値に設定し、<code>barHeight</code> に基づいて塗りつぶしの色を設定し（高めのバーは明るくなります）、<code>barWidth</code> の幅および <code>barHeight/2</code> の高さを持つ棒を、キャンバスの水平方向 <code>x</code> ピクセルの位置に描画します（我々は最終的に各バーを半分にカットすることにしたので、キャンバスにすべて収まるようになりました）。</p>
+
+<p>各バーを描画する垂直オフセット位置については説明が必要でしょう。<code>HEIGHT-barHeight/2</code> です。私は、垂直位置を 0 に設定した場合のように各バーが上から下に表示されるのではなく、キャンバスの下から出すようにしたいため、これを実行しています。そのため、毎回垂直位置に、キャンバスの高さから <code>barHeight/2</code> を引いたものをセットしています。したがって、各バーは、キャンバスの途中から下まで描画されます。</p>
+
+<pre class="brush: js">      for(var i = 0; i &lt; bufferLength; i++) {
+        barHeight = dataArray[i]/2;
+
+        canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
+        canvasCtx.fillRect(x,HEIGHT-barHeight/2,barWidth,barHeight);
+
+        x += barWidth + 1;
+      }
+    };</pre>
+
+<p>ここでも、コードの最後に <code>draw()</code> 関数を呼び出して、プロセス全体を動かすように設定します。</p>
+
+<pre class="brush: js">draw();</pre>
+
+<p>このコードでは、次のような結果が得られます。</p>
+
+<p><img alt="a series of red bars in a bar graph, showing intensity of different frequencies in an audio signal" src="https://mdn.mozillademos.org/files/7975/bar-graph.png" style="height: 157px; width: 1260px;"></p>
+
+<div class="note">
+<p><strong>付記</strong>: この記事に記載されている例では、{{domxref("AnalyserNode.getByteFrequencyData()")}}と{{domxref("AnalyserNode.getByteTimeDomainData()")}}で使用法が示されています。実際の例は{{domxref("AnalyserNode.getFloatFrequencyData()")}}と{{domxref("AnalyserNode.getFloatTimeDomainData()")}}にあるので、私たちの <a href="http://mdn.github.io/voice-change-o-matic-float-data/">Voice-change-O-matic-float-data</a> デモを参照してください（ソースコードも参照してください）— これは、元の <a href="http://mdn.github.io/voice-change-o-matic/">Voice-change-O-matic</a> とまったく同じですが、符号なしバイトデータではなく、Float データを使用しています。</p>
+</div>
+
+<p> </p>