How to Disable Auto Unlock in Howler.js

This article explains how to disable the auto-unlock feature in Howler.js, a popular JavaScript audio library. You will learn what the auto-unlock feature does, why you might want to turn it off, and the exact line of code needed to disable it in your web applications.

Understanding Auto-Unlock in Howler.js

Modern web browsers, especially mobile browsers on iOS and Android, block audio from playing automatically to prevent unwanted noise and save data. They require a user interaction (such as a tap or click) to enable audio playback.

By default, Howler.js automatically attempts to “unlock” the audio context. It does this by adding temporary touch and click event listeners to the document. Once the user taps anywhere on the screen, Howler.js plays a silent sound to unlock the audio system and then removes those listeners.

How to Disable Auto-Unlock

You can disable this automatic behavior by setting the global autoUnlock property to false on the global Howler object. This should be done before you initialize any of your sounds.

Here is the JavaScript code to disable the feature:

// Disable the automatic audio unlocking behavior
Howler.autoUnlock = false;

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

Why Disable Auto-Unlock?

While the auto-unlock feature is convenient for most developers, there are several reasons you might want to disable it:

• Custom User Interface: You want to design a custom “Play” or “Unmute” button that explicitly handles the user interaction rather than letting Howler.js unlock on any random click.
• Event Listener Control: You want to prevent Howler.js from automatically attaching event listeners (touchend, click) to the window or document object.
• Compliance and UX: In some applications, you must guarantee that no audio-related background processes or silent plays occur until the user gives explicit consent.