Howler.js Default Howl Volume Level

When working with audio in web applications using howler.js, understanding the default configuration of audio objects is essential for controlling playback. This article explains the default volume level assigned to a new Howl instance, how it affects your audio, and how you can easily retrieve or adjust this value in your JavaScript code.

The Default Volume Level

By default, when you create a new Howl instance in howler.js, the volume is set to 1.0.

In howler.js, volume is represented as a float value ranging from 0.0 (completely silent) to 1.0 (maximum volume). A default value of 1.0 means the audio will play at its full recorded volume right out of the box.

Here is a basic example showing how a new Howl instance is initialized with this default value:

// Creating a new Howl instance
const sound = new Howl({
  src: ['sound.mp3']
});

// Checking the default volume
console.log(sound.volume()); // Outputs: 1.0

How to Change the Volume

If you want to initialize a sound with a different volume level, you can define the volume property inside the configuration object when instantiating the Howl:

const quietSound = new Howl({
  src: ['sound.mp3'],
  volume: 0.5 // Plays at 50% volume
});

You can also change the volume dynamically at any point during playback by passing a number to the .volume() method:

// Change the volume of the specific sound to 25%
sound.volume(0.25);

Global Volume vs. Instance Volume

It is important to note that the volume of an individual Howl instance is relative to the global volume of the howler.js library.

Howler.js has a global volume controller, Howler.volume(), which also defaults to 1.0. If you set the global volume to 0.5 and your specific Howl instance volume is set to 0.5, the actual output volume of that sound will be 0.25 (25% of the original potential volume).