PannerNode.orientationX

PannerNode インターフェイスの orientationX プロパティは、オーディオソースが向いている方向の X (水平) 成分を 3D 直交座標空間で表示します。

完全ベクトルは (positionX (en-US)positionY (en-US)positionZ (en-US)) として与えられたオーディオソースの位置と、(orientationXorientationY (en-US)orientationZ (en-US)) として与えられたオーディオソースの向き (つまり、オーディオソースが向いている方向) によって定義されます。

サウンドの指向性 (coneInnerAngleconeOuterAngle、および coneOuterGain (en-US)) の属性を使用して指定されている) に応じて、サウンドの方向 (orientation) は、再生中のサウンドが知覚される音量を変化させることがあります。音がリスナーの方に向けられている場合は、リスナーから離れたところに向けられている場合よりも大きな音になります。

このプロパティに含まれる AudioParam は読み取り専用ですが、AudioParam.value (en-US) プロパティに新しい値を代入することで、パラメーターの値を変更できます。

構文

var orientationX = PannerNode.orientationX;

PannerNode.orientationX.value = newOrientationX;

Value

AudioParam の値は、オーディオソースが向いている方向の X 成分であり、3D 直交座標空間での値です。

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

This chart visualises how the PannerNode orientation vectors affect the direction of the sound cone.

まず、方向ベクトルを理解するためのユーティリティ関数を作成することから始めましょう。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);

仕様

仕様書 策定状況 コメント
Web Audio API
orientationX の定義
勧告

ブラウザー実装状況

BCD tables only load in the browser

関連情報