Skip to main content

setPan

Set the stereo pan of one sound. Reach for it to place a sound left or right, such as footsteps on one side of the screen.

setPan(id: string, pan: number): void;

Parameters​

ParameterTypeDefaultDescription
idstringrequiredID of the sound or stream to pan.
pannumberrequiredPan position: -1 is full left, 0 is centre, 1 is full right. Values outside that range are clamped.

Returns​

Nothing.

Example​

import { SoundHub } from 'soundhub';

const soundHub = new SoundHub();
await soundHub.loadSound('rain', '/audio/rain.mp3');

soundHub.play('rain', { loop: true });

soundHub.setPan('rain', -0.5); // halfway to the left
soundHub.setPan('rain', 0.8);  // mostly right
soundHub.setPan('rain', 0);    // centre

Try it​

Try it

Move a sound left and right

Idle
centre
LR

Play the helicopter and drag the slider. Headphones make the movement easy to follow.

Code
Your clicks show up here as soundhub calls

Good to know​

  • If the sound was positioned in 3D, setPan removes the spatial panner and moves the sound back to a stereo pan. Its spatial position goes back to 0, 0, 0 without a spatial_position_changed event.
  • The value is stored in the sound's play options, so the next play() of that sound starts at the same pan.
  • Every call dispatches SoundEventsEnum.PAN_CHANGED ('pan_changed'). The class method takes an optional third argument, skipDispatchEvent, to leave the event out. It is not on SoundHubInterface.
  • Works on streams from loadStream too. For an id that is not loaded, the error is logged, stored for getLastError and dispatched as an error event.
  • This pans one sound. The master stereo panner set by setGlobalPan sits after it, so both apply.

See also​