Skip to main content
Version: Next

PannerNode

The PannerNode interface positions an audio source in 3D space relative to the context's AudioListener.

Constructor​

constructor(context: BaseAudioContext, options?: PannerOptions)

PannerOptions​

Inherits all properties from AudioNodeOptions.

ParameterTypeDefault
panningModel
Optional
'equalpower''equalpower'Spatialization algorithm (equal-power only).
distanceModel
Optional
'linear' | 'inverse' | 'exponential''inverse'Distance attenuation model.
positionX … positionZ
Optional
number(0, 0, 0)Initial source position.
orientationX … orientationZ
Optional
number(1, 0, 0)Initial source orientation.
refDistance
Optional
number1Reference distance for attenuation.
maxDistance
Optional
number10000Maximum distance for the linear model.
rolloffFactor
Optional
number1Rolloff for distance models.
coneInnerAngle / coneOuterAngle
Optional
number360Directional cone angles (degrees).
coneOuterGain
Optional
number0Gain outside the outer cone.

You can also create a PannerNode via BaseAudioContext.createPanner().

Example​

Position a tone to the listener's left. Use headphones to hear the pan clearly. The default listener faces -Z.

import { AudioContext } from 'react-native-audio-api';

const ctx = new AudioContext();
const osc = ctx.createOscillator();
const panner = ctx.createPanner();

panner.panningModel = 'equalpower';
panner.positionX.value = -3;
panner.positionY.value = 0;
panner.positionZ.value = -1;

osc.connect(panner);
panner.connect(ctx.destination);
osc.start();

To move the listener instead of the source, set ctx.listener position params the same way.

Properties​

Inherits all properties from AudioNode.

AudioNodeproperties
NameTypeDescription
positionX, positionY, positionZAudioParamSource position in 3D space.
orientationX, orientationY, orientationZAudioParamSource orientation vector.
panningModelPanningModelType'equalpower' only.
distanceModelDistanceModelType'linear', 'inverse', or 'exponential'.
refDistance, maxDistance, rolloffFactornumberDistance model parameters.
coneInnerAngle, coneOuterAngle, coneOuterGainnumberDirectional cone.

Methods​

Inherits all methods from AudioNode.

AudioNodemethods

PannerNode does not define any additional methods.

Remarks​

  • Output is always stereo (2 channels), like StereoPannerNode.
  • Spatialization uses the context's listener position and orientation.
  • panningModel supports 'equalpower' only.