The orientationX property of the PannerNode interface indicates the X (horizontal) component of the direction in which the audio source is facing, in a 3D Cartesian coordinate space.
The complete vector is defined by the position of the audio source, given as (positionX, positionY, positionZ), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationX, orientationY, orientationZ).
Depending on the directionality of the sound (as specified using the attributes coneInnerAngle, coneOuterAngle, and coneOuterGain), the orientation of the sound may alter the perceived volume of the sound as it's being played. If the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener.
The AudioParam contained by this property is read only; however, you can still change the value of the parameter by assigning a new value to its AudioParam.value property.
An AudioParam whose value is the X component of the direction in which the audio source is facing, in 3D Cartesian coordinate space.
In this example, we'll demonstrate how changing the orientation parameters of a PannerNode in combination with coneInnerAngle and coneOuterAngle affects volume. To help us visualize how the orientation vector affects, we can use the Right-hand rule:
First, let's start by writing a utility function to figure out our orientation vector. The X and Z components are always at a 90° to each other, so we can use the sine and cosine functions, which are offset by the same amount in radians. However, normally this would mean the PannerNode points to the left of the listener at 0° rotation – since x = cos(0) = 1 and z = sin(0) = 0. It's more useful to offset the angle by -90°, which means the PannerNode will point directly at the listener at 0° rotation.
const yRotationToVector = (degrees) => {
const radians = (degrees - 90) * (Math.PI / 180);
const x = Math.cos(radians);
const z = Math.sin(radians);
return [x, 0, z];
};
Now we can create our AudioContext, an oscillator and a PannerNode:
const context = new AudioContext();
const osc = new OscillatorNode(context);
osc.type = "sawtooth";
const panner = new PannerNode(context);
panner.panningModel = "HRTF";
Next, we set up the cone of our spatialized sound, determining the area in which it can be heard:
panner.coneInnerAngle = 30;
panner.coneOuterAngle = 45;
panner.coneOuterGain = 0;
panner.positionZ.setValueAtTime(1, context.currentTime);
Having set up the PannerNode, we can now schedule some updates to its Y-axis rotation:
const [x1, y1, z1] = yRotationToVector(0);
panner.orientationX.setValueAtTime(x1, context.currentTime);
panner.orientationY.setValueAtTime(y1, context.currentTime);
panner.orientationZ.setValueAtTime(z1, context.currentTime);
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);
Finally, let's connect all our nodes and start the oscillator!
osc.connect(panner).connect(context.destination);
osc.start(0);