PannerNode：orientationX 属性

基线 广泛可用

此功能已得到充分确立，可在许多设备和浏览器版本上运行。自以下日期起，它已在所有浏览器中可用： 2021 年 4 月.

orientationX 属性是 PannerNode 接口的一个属性，它指示音频源在 3D 笛卡尔坐标空间中所面向的方向的 X（水平）分量。

完整向量由音频源的位置定义，表示为（positionX、positionY、positionZ），以及音频源的方向（即它所面向的方向），表示为（orientationX、orientationY、orientationZ）。

根据声音的方向性（如使用属性 coneInnerAngle、coneOuterAngle 和 coneOuterGain 指定），声音的方向可能会改变声音播放时的感知音量。如果声音指向聆听者，则它会比声音指向远离聆听者时更响亮。

此属性包含的 AudioParam 是只读的；但是，您仍然可以通过为其 AudioParam.value 属性分配新值来更改参数的值。

值

一个 AudioParam，其 value 是音频源在 3D 笛卡尔坐标空间中所面向的方向的 X 分量。

示例

在此示例中，我们将演示如何结合使用 PannerNode 的方向参数和 coneInnerAngle 和 coneOuterAngle 来影响音量。为了帮助我们可视化方向向量是如何影响的，我们可以使用 右手定则

This chart visualizes 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° 旋转时将直接指向聆听者。

js
// this utility converts amount of rotation around the Y axis
// (i.e. rotation in the 'horizontal plane') to an orientation vector
const yRotationToVector = (degrees) => {
  // convert degrees to radians and offset the angle so 0 points towards the listener
  const radians = (degrees - 90) * (Math.PI / 180);
  // using cosine and sine here ensures the output values are always normalized
  // i.e. they range between -1 and 1
  const x = Math.cos(radians);
  const z = Math.sin(radians);

  // we hard-code the Y component to 0, as Y is the axis of rotation
  return [x, 0, z];
};

现在我们可以创建我们的 AudioContext、一个振荡器和一个 PannerNode

js
const context = new AudioContext();

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

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

接下来，我们设置空间化声音的锥体，确定可以听到它的区域

js
// this value determines the size of the area in which the sound volume is constant
// if coneInnerAngle === 30, it means that when the sound is rotated
// by at most 15 (30/2) degrees either direction, the volume won't change
panner.coneInnerAngle = 30;
// this value determines the size of the area in which the sound volume decreases gradually
// if coneOuterAngle === 45 and coneInnerAngle === 30, it means that when the sound is rotated
// by between 15 (30/2) and 22.5 (45/2) degrees either direction,
// the volume will decrease gradually
panner.coneOuterAngle = 45;
// this value determines the volume of the sound outside of both inner and outer cone
// setting it to 0 means there is no sound, so we can clearly hear when we leave the cone
// 0 is also the default
panner.coneOuterGain = 0;
// increase the Z position to ensure the cone has an effect
// (otherwise the sound is located at the same position as the listener)
panner.positionZ.setValueAtTime(1, context.currentTime);

设置了 PannerNode 后，我们现在可以安排对其 Y 轴旋转的一些更新

js
// calculate the vector for no rotation
// this means the sound will play at full volume
const [x1, y1, z1] = yRotationToVector(0);
// schedule the no-rotation vector immediately
panner.orientationX.setValueAtTime(x1, context.currentTime);
panner.orientationY.setValueAtTime(y1, context.currentTime);
panner.orientationZ.setValueAtTime(z1, context.currentTime);

// calculate the vector for -22.4 degrees
// since our coneOuterAngle is 45, this will just about make the sound audible
// if we set it to +/-22.5, the sound volume will be 0, as the threshold is exclusive
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);

最后，让我们连接所有节点并启动振荡器！

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

osc.start(0);

规范

规范
Web Audio API
# dom-pannernode-orientationx

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅