Pause All Howler.js Sounds During a Modal

This article explains the most effective methods to pause and resume all active audio in Howler.js when a modal window is opened and closed. You will learn how to temporarily mute all audio globally, as well as how to implement a true pause-and-resume system by targeting active sound instances.

To handle audio when a modal opens, you have two primary options depending on your needs: Global Muting (simplest, but audio keeps playing silently in the background) or True Pausing (stops the audio timeline and resumes from the exact same spot).

Method 1: Global Muting (Easiest)

If you simply want to silence the application while the modal is open, Howler.js provides a global mute function. This is the easiest method because it does not require tracking individual sound objects.

When the modal opens, call:

Howler.mute(true);

When the modal closes, restore the sound with:

Howler.mute(false);

Note: The audio tracks will continue to play in the background during this time, they just won’t produce sound.

Method 2: True Pause and Resume (Recommended)

If you need the audio to physically pause its playback timeline and resume exactly where it left off once the modal is closed, you must pause the individual Howl instances.

Howler.js stores all active sound instances in an internal array called Howler._howls. You can leverage this array to pause only the sounds that are currently playing, store them, and resume them later.

Here is the helper code to handle this:

// Array to keep track of sounds that were playing before the modal opened
let activeHowls = [];

// Call this function when the modal opens
function pauseAllSounds() {
  activeHowls = []; // Clear any previous state
  
  Howler._howls.forEach(howl => {
    if (howl.playing()) {
      activeHowls.push(howl);
      howl.pause();
    }
  });
}

// Call this function when the modal closes
function resumeAllSounds() {
  activeHowls.forEach(howl => {
    howl.play();
  });
  activeHowls = []; // Reset the tracker
}

Integration Example

You can bind these functions directly to your modal’s open and close event listeners:

const modal = document.getElementById('myModal');

// Event listener for opening the modal
modal.addEventListener('show', () => {
  pauseAllSounds();
});

// Event listener for closing the modal
modal.addEventListener('hide', () => {
  resumeAllSounds();
});