How to Change Global Stereo Panning in Howler.js

This article provides a quick guide on how to adjust the global stereo panning in Howler.js. You will learn how to use the global Howler object to control the spatial audio positioning of all active and future sounds simultaneously, using a single method call and a straightforward parameter range.

To change the stereo panning globally in Howler.js, you use the stereo() method on the global Howler object. This affects all currently playing sounds as well as any sounds loaded or played in the future.

Using the Howler.stereo() Method

The Howler.stereo() method accepts a single float value between -1.0 and 1.0: * -1.0: Full left channel. * 0.0: Dead center (default). * 1.0: Full right channel.

Code Example

Here is how to implement global stereo panning in your JavaScript code:

import { Howl, Howler } from 'howler';

// Load sound files
const sound1 = new Howl({ src: ['sound1.mp3'] });
const sound2 = new Howl({ src: ['sound2.mp3'] });

// Play the sounds
sound1.play();
sound2.play();

// Change the global pan to the far left
Howler.stereo(-1.0);

// Change the global pan to the far right after 2 seconds
setTimeout(() => {
  Howler.stereo(1.0);
}, 2000);

// Reset the global pan back to the center after 4 seconds
setTimeout(() => {
  Howler.stereo(0.0);
}, 4000);

Key Considerations