How to Mute All Sounds Globally with Howler.js
Controlling audio playback in web applications can be challenging,
but Howler.js simplifies the process. This article provides a quick and
direct guide on how to mute and unmute all active sounds globally using
a single line of code with the global Howler object.
To mute all sounds globally in Howler.js, you use the global
Howler object rather than individual Howl
instances. The global Howler object controls the master
AudioContext and all active sound objects currently loaded in your
application.
The Code to Mute All Sounds
To mute all sounds immediately, call the mute() method
on the global Howler object and pass true as
the argument:
// Mute all sounds globally
Howler.mute(true);The Code to Unmute All Sounds
To restore the sound and unmute your application, pass
false to the same method:
// Unmute all sounds globally
Howler.mute(false);How It Works
Using Howler.mute(true) is highly efficient because it
silences all currently playing audio and any new audio that begins
playing while muted. Crucially, this method does not alter the
individual volume properties of your specific Howl
instances. When you call Howler.mute(false), all sounds
will instantly resume playing at their original, pre-muted volume
levels. This makes it the ideal solution for building a global “Mute”
toggle button for games, interactive websites, and presentation
tools.