How to Mute a Specific Howl Instance in Howler.js

This article explains how to mute and unmute a single, specific Howl audio instance in the howler.js library without affecting other active sounds. You will learn the exact syntax to target an individual sound instance, the difference between global and instance-level muting, and how to control specific sound IDs.

To mute a specific Howl instance in howler.js, you use the .mute() method directly on that instance by passing true as the first argument. This isolates the mute action to that specific sound object, allowing other sounds managed by howler.js to continue playing.

Step-by-Step Implementation

  1. Create the Howl Instance First, define your audio instance using the Howl constructor.

    const ambientMusic = new Howl({
      src: ['ambient.mp3'],
      loop: true,
      volume: 0.5
    });
    
    ambientMusic.play();
  2. Mute the Instance To mute this specific sound, call the .mute() method on the variable holding your instance and pass true as the parameter:

    ambientMusic.mute(true);
  3. Unmute the Instance To unmute the sound and restore its previous volume, call the method with false:

    ambientMusic.mute(false);

Instance Muting vs. Global Muting

It is important not to confuse instance-level muting with global muting:

Muting a Specific Sound ID within an Instance

If your Howl instance plays multiple sounds (such as an audio sprite) and you only want to mute a specific playback ID, you can pass that ID as the second argument to the .mute() method:

// Play the sound and capture its unique ID
const soundId = ambientMusic.play();

// Mute only this specific playback ID
ambientMusic.mute(true, soundId);