PannerNode.coneOuterAngle

PannerNode インターフェイスの coneOuterAngle プロパティは、音量が一定値まで低減される範囲を外側に持つコーンの角度が、実数値 (倍精度) で参照できます。低減は  coneOuterGain 属性の値に従います。

var audioCtx = new AudioContext();
var panner = audioCtx.createPanner();
panner.coneOuterAngle = 0;

A double.

この例では、coneInnerAngle と coneOuterAngle を組み合わせて PannerNode の方向パラメーターを変更すると、ボリュームにどのように影響するかを示します。方向ベクトル (orientation vector) がどのように影響するかを視覚化するために、右手の法則を使用することができます。

まず、方向ベクトルを理解するためのユーティリティ関数を作成することから始めましょう。X 成分と Z 成分は常に互いに 90°であるため、ラジアン単位で同じ量だけオフセットされる正弦関数と余弦関数を使用できます。ただし、これは通常、PannerNode が 0°回転でリスナーの左側を指すことを意味します。`x= cos(0)= 1` および `z = sin(0) = 0` であるためです。角度を -90°オフセットするとより便利です。つまり、PannerNode は 0°の回転でリスナーを直接指します。

// このユーティリティは、Y 軸周りの回転量 (つまり「水平面」での回転) を
// 方向ベクトルに変換します
const yRotationToVector = degrees => {
  // 度をラジアンに変換し、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];
};

これで、AudioContext、オシレーター、および PannerNode を作成できます。

const context = new AudioContext();

const osc = new OscillatorNode(context);
osc.type = 'sawtooth';

const panner = new PannerNode(context);
panner.panningModel = 'HRTF';

次に、スペーシャルサウンドのコーンを設定し、それが聞こえる範囲を決めます。

// この値は、音量が一定となる領域のサイズを決定します
// たとえば 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);

PannerNode を設定したら、Y 軸の回転を更新するスケジュールを設定できます。

// 回転がない場合のベクトルを計算する
// これは音がフルボリュームで再生されることを意味します
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);

最後に、すべてのノードを接続して、オシレーターを起動しましょう！

osc.connect(panner)
   .connect(context.destination);

osc.start(0);

• Using the Web Audio API
• Web Audio spatialisation basics