How to Change Sprite Volume in Howler.js

This article explains how to change the volume of a specific audio sprite in Howler.js. You will learn how to target an individual sprite during playback using its unique sound ID and adjust its volume dynamically without affecting other sounds.

In Howler.js, you cannot set a volume directly on the sprite definition inside the configuration object. Instead, you control the volume of a specific sprite by capturing the unique sound ID returned when the sprite is played, and then passing that ID to the volume() method.

Step 1: Define Your Howl Instance with Sprites

First, instantiate your Howl object and define your audio sprites. Each sprite is defined by its start time and duration in milliseconds.

const sound = new Howl({
  src: ['sounds.mp3'],
  sprite: {
    blast: [0, 1000],
    laser: [2000, 1000]
  }
});

Step 2: Play the Sprite and Capture the Sound ID

When you call the .play() method with the name of your sprite, Howler.js returns a unique integer known as the soundId. You must store this ID in a variable to modify this specific playback instance later.

// Play the 'blast' sprite and save its unique ID
const blastId = sound.play('blast');

Step 3: Change the Volume Using the Sound ID

To change the volume of that specific active sprite, call the .volume() method on your Howl instance. Pass the desired volume level (a float between 0.0 and 1.0) as the first argument, and the captured soundId as the second argument.

// Change the volume of the 'blast' sprite to 50%
sound.volume(0.5, blastId);

By passing the blastId, Howler.js lowers the volume of only that specific playback instance. If you have other sprites playing simultaneously, such as the laser sprite, their volumes will remain unchanged.