Skip to main content

SoundPanType

The SoundPanType enum defines the available panning modes for a sound. It determines how the sound's stereo or spatial position is processed.

Try it​

Move the sound between the left and right channel to hear stereo panning at work. Use headphones for the clearest effect.

Pan Position
Center
LCR
Try it: Play the helicopter sound and drag the pan slider to hear the sound move from left to right. The pan updates in real time.
export enum SoundPanType {
  STEREO = 'stereo',
  SPATIAL = 'spatial',
}

Stereo Panning​

Stereo panning (default) moves the sound between the left and right audio channels. Use values from -1 (full left) to 1 (full right), with 0 being center.

Spatial Panning​

Spatial panning uses 3D position coordinates (x, y, z) to position the sound in a 3D space, creating a more immersive audio experience. The sound's position relative to the listener determines how it is heard.

Using SoundPanType in PlayOptions​

const mySoundHub = new SoundHub();
await mySoundHub.loadSound('helicopter', '/audio/helicopter.mp3');

// Stereo panning - sound moves left to right
mySoundHub.play('helicopter', {
  createNewInstance: true,
  panType: SoundPanType.STEREO,
  pan: -0.8, // Shifted to the left
});

// Spatial panning - sound positioned in 3D space
mySoundHub.play('helicopter', {
  createNewInstance: true,
  panType: SoundPanType.SPATIAL,
  panSpatialPosition: { x: 10, y: 5, z: -15 }, // 3D position
  pannerConfig: {
    panningModel: 'HRTF',
    distanceModel: 'linear',
    refDistance: 1,
    maxDistance: 50,
    rolloffFactor: 1,
  },
});

Switching Between Pan Types​

const mySoundHub = new SoundHub();
await mySoundHub.loadSound('voice', '/audio/voice.mp3');
mySoundHub.play('voice');

// Start with stereo panning
mySoundHub.setPan('voice', 0.5);

// Later, switch to spatial panning using updateSoundOptions
mySoundHub.updateSoundOptions('voice', {
  panType: SoundPanType.SPATIAL,
  panSpatialPosition: { x: 0, y: 0, z: -5 },
});

Checking Pan Type​

const mySoundHub = new SoundHub();
await mySoundHub.loadSound('effect', '/audio/effect.mp3');

// Play with spatial panning
mySoundHub.play('effect', {
  panType: SoundPanType.SPATIAL,
  panSpatialPosition: { x: 2, y: 1, z: -3 },
});

// Check if stereo pan is active
if (mySoundHub.isStereoPanActive('effect')) {
  // This will be false since we're using spatial panning
}

// Check if spatial audio is active
if (mySoundHub.isSpatialAudioActive('effect')) {
  console.log('Spatial audio is active for this sound');
}

Practical Example: Dynamic Panning​

const mySoundHub = new SoundHub();
await mySoundHub.loadSound('engine', '/audio/engine.mp3');

// Use stereo panning for a moving sound effect
mySoundHub.play('engine', {
  panType: SoundPanType.STEREO,
  pan: -1, // Start from the left
});

// Move sound from left to right over 5 seconds
let panValue = -1;
const interval = setInterval(() => {
  panValue += 0.1;
  mySoundHub.setPan('engine', panValue);
  
  if (panValue >= 1) {
    clearInterval(interval);
  }
}, 500);