Stop a Specific Audio ID in Howler.js

When working with the howler.js library, playing a sound multiple times concurrently can make audio management tricky. This article provides a quick guide on how to target and stop a specific playback instance using its unique audio ID, rather than stopping all active sounds on the entire Howl object.

By default, calling the .stop() method directly on a Howl instance will halt every active playback of that sound. To stop only a single instance, you must capture the unique ID generated when the sound is first initiated.

Capturing the Sound ID

Whenever you call the .play() method on a Howl object, it returns an integer representing the unique ID of that specific sound instance.

const sound = new Howl({
  src: ['audio.mp3']
});

// Start playback and capture the unique IDs
const audioId1 = sound.play();
const audioId2 = sound.play();

Stopping the Specific Instance

To stop only one of these instances while leaving the other playing, pass the captured ID as an argument to the .stop() method.

// This stops only the first playback instance
sound.stop(audioId1);

// audioId2 will continue to play uninterrupted

Other ID-Specific Methods

This ID-targeting system is not limited to stopping audio. You can use the specific sound ID to control other properties of an individual playback instance without affecting other sounds:

• Pause: sound.pause(audioId1);
• Volume: sound.volume(0.5, audioId1); (sets the volume of only this instance to 50%)
• Mute: sound.mute(true, audioId1);
• Loop: sound.loop(true, audioId1);

By utilizing these ID-specific parameters, you gain precise control over overlapping sound effects, ambient tracks, and voiceovers in your application.