How to Completely Stop Audio in Howler.js

Controlling audio in web applications is crucial for a seamless user experience. This article provides a quick guide on how to completely stop audio playback in Howler.js, covering how to halt a single sound instance, stop a specific playback ID, or silence all active audio globally.

To completely stop audio in Howler.js, you use the stop() method. Unlike pause(), which temporarily halts playback and retains the current playhead position, stop() immediately silences the audio and resets its playback position back to the beginning (0.0 seconds).

Stopping a Specific Howl Instance

If you want to stop a specific sound object, call the stop() method directly on that instance. This will stop all active playbacks of that particular sound.

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

// Play the sound
sound.play();

// Completely stop the sound and reset its position
sound.stop();

Stopping a Specific Sound ID

Howler.js allows you to play the same sound instance multiple times simultaneously, with each playback returning a unique ID. To stop a specific playback instance while letting others continue, pass the playback ID to the stop() method.

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

// Start multiple playbacks
const id1 = sound.play();
const id2 = sound.play();

// Stop only the first playback
sound.stop(id1);

Stopping All Sounds Globally

To stop all active audio playback across all Howl instances on your page, use the global Howler object. This is highly useful for features like game-over screens, page transitions, or global mute buttons.

// Stop every sound currently playing in Howler.js
Howler.stop();