initial commit

4 files changed, 422 insertions, 0 deletions

diff --git a/files/ja/web/api/pannernode/coneinnerangle/index.html b/files/ja/web/api/pannernode/coneinnerangle/index.html
new file mode 100644
index 0000000000..f5b4f3216d
--- /dev/null
+++ b/files/ja/web/api/pannernode/coneinnerangle/index.html
@@ -0,0 +1,65 @@
+---
+title: PannerNode.coneInnerAngle
+slug: Web/API/PannerNode/coneInnerAngle
+tags:
+  - API
+  - PannerNode
+  - Property
+  - Reference
+  - Web Audio API
+  - coneInnerAngle
+translation_of: Web/API/PannerNode/coneInnerAngle
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>{{ domxref("PannerNode") }} インターフェイスの <code>coneInnerAngle</code> プロパティは、音量が低減しない範囲を内側にもつコーンの角度が、実数値 (倍精度) で参照できます。</p>
+
+<p><code>coneInnerAngle</code> プロパティのデフォルトの値は <code>360</code> で、無指向性の音源に適しています。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: js notranslate">var audioCtx = new AudioContext();
+var panner = audioCtx.createPanner();
+panner.coneInnerAngle = 360;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>倍精度浮動小数点数。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>{{page("/ja/docs/Web/API/PannerNode/orientationX","Example")}}</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', '#dom-pannernode-coneinnerangle', 'coneInnerAngle')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<div>
+
+
+<p>{{Compat("api.PannerNode.coneInnerAngle")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio spatialisation basics</a></li>
+</ul>
diff --git a/files/ja/web/api/pannernode/coneouterangle/index.html b/files/ja/web/api/pannernode/coneouterangle/index.html
new file mode 100644
index 0000000000..80997c1dcd
--- /dev/null
+++ b/files/ja/web/api/pannernode/coneouterangle/index.html
@@ -0,0 +1,66 @@
+---
+title: PannerNode.coneOuterAngle
+slug: Web/API/PannerNode/coneOuterAngle
+tags:
+  - API
+  - PannerNode
+  - Property
+  - Reference
+  - Référence(2)
+  - Web Audio API
+  - coneOuterAngle
+translation_of: Web/API/PannerNode/coneOuterAngle
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<p>{{ domxref("PannerNode") }} インターフェイスの <code>coneOuterAngle</code> プロパティは、音量が一定値まで低減される範囲を外側に持つコーンの角度が、実数値 (倍精度) で参照できます。低減は  <code>coneOuterGain</code> 属性の値に従います。</p>
+
+<div>
+<p><code>coneOuterAngle</code> プロパティのデフォルトの値は <code>0</code> です。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="brush: js notranslate">var audioCtx = new AudioContext();
+var panner = audioCtx.createPanner();
+panner.coneOuterAngle = 0;</pre>
+
+<h3 id="Value" name="Value">値</h3>
+
+<p>A double.</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>{{page("/ja/docs/Web/API/PannerNode/orientationX","Example")}}</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', '#dom-pannernode-coneouterangle', 'coneOuterAngle')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<div>
+
+
+<p>{{Compat("api.PannerNode.coneOuterAngle")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio spatialisation basics</a></li>
+</ul>
diff --git a/files/ja/web/api/pannernode/index.html b/files/ja/web/api/pannernode/index.html
new file mode 100644
index 0000000000..7c3502a6ed
--- /dev/null
+++ b/files/ja/web/api/pannernode/index.html
@@ -0,0 +1,147 @@
+---
+title: PannerNode
+slug: Web/API/PannerNode
+tags:
+  - API
+  - Interface
+  - PannerNode
+  - Reference
+  - Web Audio API
+translation_of: Web/API/PannerNode
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p><code>PannerNode</code> は音源の空間上の位置と振る舞いを表現したインターフェイスで、{{domxref("AudioNode")}} の一種です。右手直交座標系に従って位置を表し、音源の動きは速度ベクトルと、向きを表すサウンドコーンを利用して表現します。</p>
+</div>
+
+<p><code>PannerNode</code> は必ず 1 つの入力と、1 つの出力を持ちます。入力はモノラルでもステレオでも構いませんが、出力は必ずステレオとなります。つまりパンニングを行うには最低でも 2 チャンネルの音声チャンネルを必要です。</p>
+
+<p><img alt="The PannerNode brings a spatial position and velocity and a directionality for a given signal." src="https://mdn.mozillademos.org/files/13815/WebAudioPannerNode.png" style="display: block; height: 225px; margin: 0px auto; width: 771px;"></p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">入力数</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">出力数</th>
+   <td><code>1</code></td>
+  </tr>
+  <tr>
+   <th scope="row">チャンネルの数え方</th>
+   <td><code>"clamped-max"</code></td>
+  </tr>
+  <tr>
+   <th scope="row">チャンネル数</th>
+   <td><code>2</code></td>
+  </tr>
+  <tr>
+   <th scope="row">チャンネルの意味</th>
+   <td><code>"speakers"</code></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="コンストラクター">コンストラクター</h2>
+
+<dl>
+ <dt>{{domxref("PannerNode.PannerNode")}}</dt>
+ <dd>新しい <code>PannerNode</code> オブジェクトを作成します。</dd>
+</dl>
+
+<h2 id="Properties" name="Properties">属性</h2>
+
+<p><em>親クラスである {{domxref("AudioNode")}} の属性を継承しています。</em></p>
+
+<div class="note">
+<p>向きと位置の設定と取得は異なる方法で行います。これは、これらの値が {{domxref("AudioParam")}} として保存されてるためです。値の取得は  <code>PannerNode.positionX</code> のように行えますが、同じ属性に対して値を設定するには <code>PannerNode.positionX.value</code> のように行います。そのため、これらの値は、WebIDL にあるように、読み取り専用とは定義されていません。</p>
+</div>
+
+<dl>
+ <dt>{{domxref("PannerNode.coneInnerAngle")}}</dt>
+ <dd>音量が低減しない範囲を内側にもつコーンの角度が、実数値 (倍精度) で参照できます。</dd>
+ <dt>{{domxref("PannerNode.coneOuterAngle")}}</dt>
+ <dd>音量が一定値まで低減される範囲を外側に持つコーンの角度が、実数値 (倍精度) で参照できます。低減は  <code>coneOuterGain</code> 属性の値に従います。</dd>
+ <dt>{{domxref("PannerNode.coneOuterGain")}}</dt>
+ <dd><code>coneOuterAngle</code> の外で行われる音量の低減量を定義します。標準値は <code>0</code> で、これは音が聞こえなくなることを表します。</dd>
+ <dt>{{domxref("PannerNode.distanceModel")}}</dt>
+ <dd>音量の低減計算に用いるアルゴリズムを定めます。アルゴリズムは定められたものの中から選択します。とりうる値は <code>"linear"</code>、<code>"inverse"</code>、<code>"exponential"</code>で、デフォルト値は <code>"inverse"</code>です。</dd>
+ <dt>{{domxref("PannerNode.maxDistance")}}</dt>
+ <dd>音源と聴取者の最大距離を定義します。これを超えた場合、音量の低減計算がなされません。</dd>
+ <dt>{{domxref("PannerNode.orientationX")}}</dt>
+ <dd>右手直交座標系における音源の向きを表すベクトルのうち、水平方向の値です。{{domxref("AudioParam")}} は直接変更できないため、値の変更は{{domxref("AudioParam.value", "value")}} 属性を通して行います。初期値は 1 となっています。</dd>
+ <dt>{{domxref("PannerNode.orientationY")}}</dt>
+ <dd>右手直交座標系における音源の向きを表すベクトルのうち、垂直方向の値です。{{domxref("AudioParam")}} は直接変更できないため、値の変更は{{domxref("AudioParam.value", "value")}} 属性を通して行います。初期値は 0 となっています。</dd>
+ <dt>{{domxref("PannerNode.orientationZ")}}</dt>
+ <dd>右手直交座標系における音源の向きを表すベクトルのうち、奥行き(前後)方向の値です{{domxref("AudioParam")}} は直接変更できないため、値の変更は{{domxref("AudioParam.value", "value")}} 属性を通して行います。初期値は 0 となっています。</dd>
+ <dt>{{domxref("PannerNode.panningModel")}}</dt>
+ <dd>
+ <p>立体音響計算を行うアルゴリズムを定めます。アルゴリズムは定められたものの中から選びます。</p>
+ </dd>
+ <dt>{{domxref("PannerNode.positionX")}}</dt>
+ <dd>右手直交座標系における音源の位置を表すベクトルのうち、水平方向の値です{{domxref("AudioParam")}} は直接変更できないため、値の変更は{{domxref("AudioParam.value", "value")}} 属性を通して行います。初期値は 0 となっています。</dd>
+ <dt>{{domxref("PannerNode.positionY")}}</dt>
+ <dd>右手直交座標系における音源の位置を表すベクトルのうち、垂直方向の値です{{domxref("AudioParam")}} は直接変更できないため、値の変更は{{domxref("AudioParam.value", "value")}} 属性を通して行います。初期値は 0 となっています。</dd>
+ <dt>{{domxref("PannerNode.positionZ")}}</dt>
+ <dd>右手直交座標系における音源の位置を表すベクトルのうち、奥行き(前後)方向の値です{{domxref("AudioParam")}} は直接変更できないため、値の変更は{{domxref("AudioParam.value", "value")}} 属性を通して行います。初期値は 0 となっています。</dd>
+ <dt>{{domxref("PannerNode.refDistance")}}</dt>
+ <dd>音量の低減計算に用いる基準距離を表します。音源と聴取者との距離がこれを超えた場合、<code>rolloffFactor</code> と <code>distanceModel</code> に基づいて音量の低減が起きます。</dd>
+ <dt>{{domxref("PannerNode.rolloffFactor")}}</dt>
+ <dd>音源が聴取者から離れていく際に起きる音量の低減量を定めます。この値は、全ての距離モデルで利用されます。</dd>
+</dl>
+
+<h2 id="Methods" name="Methods">メソッド</h2>
+
+<p>親クラスである <em>{{domxref("AudioNode")}}</em> のメソッドを継承しています。</p>
+
+<dl>
+ <dt>{{domxref("PannerNode.setPosition()")}}</dt>
+ <dd>聴取者に対する音源の相対位置を設定します。聴取者の位置は {{domxref("AudioContext.listener")}}  で参照される{{domxref("AudioListener")}} オブジェクトで表されています。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("PannerNode.setOrientation()")}}</dt>
+ <dd>音源が再生されている方向を設定します。</dd>
+</dl>
+
+<dl>
+ <dt>{{domxref("PannerNode.setVelocity()")}} {{obsolete_inline}}</dt>
+ <dd>音源の速度を表したベクトルです。移動する速さと方向を表しています。以前の仕様では下流に接続された{{domxref("AudioBufferSourceNode")}} のピッチを上げ下げするために、{{domxref("PannerNode")}} は速度を表す属性を持っていました。この機能は明瞭に定義されておらず、問題も多かったため、現在の仕様からは削除されています。</dd>
+</dl>
+
+<h2 id="Examples" name="Examples">例</h2>
+
+<p>{{page("/ja/docs/Web/API/AudioContext.createPanner","Example")}}</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', '#the-pannernode-interface', 'PannerNode')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<div>
+
+
+<p>{{Compat("api.PannerNode")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+</ul>
diff --git a/files/ja/web/api/pannernode/orientationx/index.html b/files/ja/web/api/pannernode/orientationx/index.html
new file mode 100644
index 0000000000..defdbe0a13
--- /dev/null
+++ b/files/ja/web/api/pannernode/orientationx/index.html
@@ -0,0 +1,144 @@
+---
+title: PannerNode.orientationX
+slug: Web/API/PannerNode/orientationX
+tags:
+  - PannerNode
+  - Property
+  - Reference
+  - Web Audio API
+  - orientationX
+translation_of: Web/API/PannerNode/orientationX
+---
+<p>{{ APIRef("Web Audio API") }}</p>
+
+<div>
+<p>{{ domxref("PannerNode") }} インターフェイスの <strong><code>orientationX</code></strong> プロパティは、オーディオソースが向いている方向の X (水平) 成分を 3D 直交座標空間で表示します。</p>
+
+<p>完全ベクトルは ({{domxref("PannerNode.positionX", "positionX")}}、{{domxref("PannerNode.positionY", "positionY")}}、{{domxref("PannerNode.positionZ", "positionZ")}}) として与えられたオーディオソースの位置と、({{domxref("PannerNode.orientationX", "orientationX")}}、{{domxref("PannerNode.orientationY", "orientationY")}}、{{domxref("PannerNode.orientationZ", "orientationZ")}}) として与えられたオーディオソースの向き (つまり、オーディオソースが向いている方向) によって定義されます。</p>
+
+<p>サウンドの指向性 ({{domxref("PannerNode.coneInnerAngle", "coneInnerAngle")}}、{{domxref("PannerNode.coneOuterAngle", "coneOuterAngle")}}、および {{domxref("PannerNode.coneOuterGain", "coneOuterGain")}}) の属性を使用して指定されている) に応じて、サウンドの方向 (orientation) は、再生中のサウンドが知覚される音量を変化させることがあります。音がリスナーの方に向けられている場合は、リスナーから離れたところに向けられている場合よりも大きな音になります。</p>
+
+<p>このプロパティに含まれる {{domxref("AudioParam")}} は読み取り専用ですが、{{domxref("AudioParam.value")}} プロパティに新しい値を代入することで、パラメーターの値を変更できます。</p>
+</div>
+
+<h2 id="Syntax" name="Syntax">構文</h2>
+
+<pre class="syntaxbox notranslate">var <em>orientationX</em> = <em>PannerNode</em>.orientationX;
+
+<em>PannerNode</em>.orientationX.value = <em>newOrientationX</em>;
+</pre>
+
+<h3 id="Value" name="Value">Value</h3>
+
+<p>{{domxref("AudioParam")}} の値は、オーディオソースが向いている方向の X 成分であり、3D 直交座標空間での値です。</p>
+
+<h2 id="Example" name="Example">例</h2>
+
+<p>この例では、{{domxref("PannerNode.coneInnerAngle", "coneInnerAngle")}} と {{domxref("PannerNode.coneOuterAngle", "coneOuterAngle")}} を組み合わせて {{ domxref("PannerNode") }} の方向パラメーターを変更すると、ボリュームにどのように影響するかを示します。方向ベクトル (orientation vector) がどのように影響するかを視覚化するために、<a href="https://ja.wikipedia.org/wiki/%E5%8F%B3%E6%89%8B%E3%81%AE%E6%B3%95%E5%89%87">右手の法則</a>を使用することができます。</p>
+
+<p><img alt="This chart visualises how the PannerNode orientation vectors affect the direction of the sound cone." src="https://mdn.mozillademos.org/files/16238/pannernode-orientation.png" style="height: 381px; width: 935px;"></p>
+
+<p>まず、方向ベクトルを理解するためのユーティリティ関数を作成することから始めましょう。X 成分と Z 成分は常に互いに 90°であるため、ラジアン単位で同じ量だけオフセットされる正弦関数と余弦関数を使用できます。ただし、これは通常、{{ domxref("PannerNode") }} が 0°回転でリスナーの<strong>左側</strong>を指すことを意味します。`x= cos(0)= 1` および `z = sin(0) = 0` であるためです。角度を -90°オフセットするとより便利です。つまり、{{ domxref("PannerNode") }} は 0°の回転で<strong>リスナーを直接</strong>指します。</p>
+
+<pre class="brush: js notranslate">// このユーティリティは、Y 軸周りの回転量 (つまり「水平面」での回転) を
+// 方向ベクトルに変換します
+const yRotationToVector = degrees =&gt; {
+  // 度をラジアンに変換し、0 でリスナーの方を向くように角度をオフセットします
+  const radians = (degrees - 90) * (Math.PI / 180);
+  // ここで cosine と sine を使用すると，出力値は常に正規化されます
+  // つまり、これらは -1 から 1 の間の範囲です
+  const x = Math.cos(radians);
+  const z = Math.sin(radians);
+
+  // Y は回転軸なので、Y 成分を 0 にハードコードします。
+  return [x, 0, z];
+};
+</pre>
+
+<p>これで、{{ domxref("AudioContext") }}、オシレーター、および {{ domxref("PannerNode") }} を作成できます。</p>
+
+<pre class="brush: js notranslate">const context = new AudioContext();
+
+const osc = new OscillatorNode(context);
+osc.type = 'sawtooth';
+
+const panner = new PannerNode(context);
+panner.panningModel = 'HRTF';</pre>
+
+<p>次に、スペーシャルサウンドの<em>コーン</em>を設定し、それが聞こえる範囲を決めます。</p>
+
+<pre class="brush: js notranslate">// この値は、音量が一定となる領域のサイズを決定します
+// たとえば coneInnerAngle == 30 のとき、
+// サウンドを左右どちらかに 15 度 (30/2) まで回転させても音量は変わりません。
+panner.coneInnerAngle = 30;
+// この値は、音量が徐々に減衰する領域のサイズを決定します
+// たとえば coneOuterAngle == 45 かつ coneInnerAngle == 30 のとき、
+// 音を左右どちらかに 15 度 (30/2) から 22.5 度 (45/2) の間で回転させると、
+// 徐々に音量が小さくなります。
+panner.coneOuterAngle = 45;
+// この値は、inner/outer の両方のコーンの外側の音の大きさを決定します
+// 0 に設定すると音が出ず、コーンから離れたときにはっきり聞こえます
+// 0 はデフォルト値でもあります
+panner.coneOuterGain = 0;
+// Z位置を大きくして、コーンの効果を確実にします
+// 利用しない場合、音はリスナーと同じ位置にあります
+panner.positionZ.setValueAtTime(1, context.currentTime);</pre>
+
+<p>{{ domxref("PannerNode") }} を設定したら、Y 軸の回転を更新するスケジュールを設定できます。</p>
+
+<pre class="brush: js notranslate">// 回転がない場合のベクトルを計算する
+// これは音がフルボリュームで再生されることを意味します
+const [x1, y1, z1] = yRotationToVector(0);
+// 無回転ベクトルを直ちにスケジュールする
+panner.orientationX.setValueAtTime(x1, context.currentTime);
+panner.orientationY.setValueAtTime(y1, context.currentTime);
+panner.orientationZ.setValueAtTime(z1, context.currentTime);
+
+// -22.4 度のためのベクトルを計算する
+// ここでの coneOuterAngle は 45 であるため、ちょうど音が聞こえるようになります
+// これを +/-22.5 に設定すると、しきい値が排他的なので音量は 0 になります。
+const [x2, y2, z2] = yRotationToVector(-22.4);
+panner.orientationX.setValueAtTime(x2, context.currentTime + 2);
+panner.orientationY.setValueAtTime(y2, context.currentTime + 2);
+panner.orientationZ.setValueAtTime(z2, context.currentTime + 2);</pre>
+
+<p>最後に、すべてのノードを接続して、オシレーターを起動しましょう！</p>
+
+<pre class="brush: js notranslate">osc.connect(panner)
+   .connect(context.destination);
+
+osc.start(0);
+</pre>
+
+<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', '#dom-pannernode-orientationx', 'orientationX')}}</td>
+   <td>{{Spec2('Web Audio API')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2>
+
+<div>
+
+
+<p>{{Compat("api.PannerNode.orientationX")}}</p>
+</div>
+
+<h2 id="See_also" name="See_also">関連情報</h2>
+
+<ul>
+ <li><a href="/ja/docs/Web_Audio_API/Using_Web_Audio_API">Web Audio API の使用</a></li>
+ <li><a href="/ja/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics">Web Audio spatialisation basics</a></li>
+ <li>{{domxref("PannerNode")}}</li>
+</ul>