How to Change Global Volume in Howler.js

Controlling the volume of multiple audio tracks simultaneously is a common requirement in web audio development. This article provides a quick and direct guide on how to globally adjust the volume of all sounds in howler.js using the library’s core global object, ensuring consistent audio control across your entire web application.

To adjust the volume of all sounds globally in howler.js, you use the global Howler object (with a capital “H”), rather than an individual Howl instance. The library provides the Howler.volume() method specifically for this purpose.

Setting the Global Volume

Pass a float value between 0.0 (mute) and 1.0 (full volume) into the Howler.volume() method. This will immediately scale the volume of all currently playing and future sounds.

// Set the volume of all sounds to 50%
Howler.volume(0.5);

// Mute all sounds
Howler.volume(0.0);

// Set all sounds back to maximum volume
Howler.volume(1.0);

Getting the Current Global Volume

If you call the method without any arguments, it acts as a getter and returns the current global volume level.

// Retrieve the current global volume
const currentVolume = Howler.volume();

console.log(currentVolume); // Outputs a value between 0.0 and 1.0

How Global Volume Interacts with Individual Volume

The global volume acts as a master fader. If you have an individual sound instance set to a volume of 0.8 (Howl({ volume: 0.8 })) and you set the global volume to 0.5, the actual playback volume of that specific sound will be calculated relative to the master volume (resulting in an effective volume of 0.4).