How to Soft Mute Audio in Howler.js

This article explains how to implement a “soft-mute” feature in Howler.js, which reduces the audio volume to a low background level instead of silencing it completely. You will learn how to programmatically toggle and transition audio levels for individual sound objects as well as globally across all active sounds using the library’s built-in volume and fade methods.

Unlike the default mute() method in Howler.js which cuts off sound entirely, a soft-mute requires manually managing the volume state. To achieve this, you define a target “soft” volume level and switch between your normal playback volume and this reduced level.

Method 1: Instant Soft-Mute Using volume()

To implement a basic soft-mute on a specific Howl instance, you can store the state of the mute and update the volume directly using the .volume() method.

// Initialize the sound
const sound = new Howl({
  src: ['track.mp3'],
  volume: 0.8 // Normal playing volume
});

// State tracking
let isSoftMuted = false;
const NORMAL_VOLUME = 0.8;
const SOFT_MUTE_VOLUME = 0.15; // Reduced volume instead of 0

function toggleSoftMute() {
  if (isSoftMuted) {
    sound.volume(NORMAL_VOLUME);
  } else {
    sound.volume(SOFT_MUTE_VOLUME);
  }
  isSoftMuted = !isSoftMuted;
}

Method 2: Smooth Soft-Mute Using fade()

For a more polished user experience, you can transition to the soft-mute level gradually. Howler.js provides a .fade() method that smoothly changes the volume over a specified duration (in milliseconds).

let isSoftMuted = false;
const NORMAL_VOLUME = 0.8;
const SOFT_MUTE_VOLUME = 0.1;
const FADE_DURATION = 1000; // 1 second transition

function toggleSoftMuteWithFade() {
  const startVolume = sound.volume();
  const endVolume = isSoftMuted ? NORMAL_VOLUME : SOFT_MUTE_VOLUME;

  // Fade from the current volume to the target volume
  sound.fade(startVolume, endVolume, FADE_DURATION);
  
  isSoftMuted = !isSoftMuted;
}

Method 3: Global Soft-Mute

If you want to soft-mute all sounds currently playing in your application, you can control the global Howler object. Adjusting Howler.volume() acts as a master volume control, scaling the volume of all individual Howl instances.

let isGlobalSoftMuted = false;
const GLOBAL_NORMAL = 1.0;
const GLOBAL_SOFT_MUTE = 0.2; // Reduces overall environment volume to 20%

function toggleGlobalSoftMute() {
  const targetVolume = isGlobalSoftMuted ? GLOBAL_NORMAL : GLOBAL_SOFT_MUTE;
  
  // Set master volume
  Howler.volume(targetVolume);
  
  isGlobalSoftMuted = !isGlobalSoftMuted;
}