Does Howler.js Play Audio on Silent Mode?

This article explains how the howler.js JavaScript library behaves when a mobile device is set to silent or mute mode. It covers the technical differences between iOS and Android platforms, explains how Web Audio API and HTML5 Audio fallbacks are affected by hardware switches, and provides practical insights for web developers handling audio playback.

iOS Behavior (iPhones and iPads)

On iOS devices, the behavior of howler.js is strictly governed by Apple’s operating system rules regarding the physical Ring/Silent switch.

By default, howler.js utilizes the Web Audio API for audio playback. When an iOS device is switched to silent mode: * Web Audio API is muted: All audio generated via the Web Audio API is automatically silenced by the operating system, meaning howler.js will play silently. * HTML5 Audio Fallback: If you configure howler.js to use HTML5 Audio (by setting the html5: true option), the audio is treated as media playback. On older iOS versions, HTML5 audio might have bypassed the silent switch if initiated by a user tap. However, in modern iOS versions, Safari and other browsers heavily restrict autoplay and will generally mute HTML5 audio when the silent switch is enabled, unless the browser detects an active user session explicitly designed for media consumption (like a video player).

In standard web browsers on iOS, there is no web-standard API way to programmatically bypass the physical silent switch.

Android Behavior

Android handles audio streams differently than iOS by separating audio into distinct channels (e.g., Ringtone, Notifications, Alarms, and Media).

When an Android device is put into “Silent” or “Vibrate” mode: * Media Stream remains active: The silent switch typically only mutes the Ringtone and Notification streams. * Howler.js continues to play: Since web browsers route howler.js audio (both Web Audio API and HTML5 Audio) through the “Media” stream, sound will still play through the device speakers or headphones even if the phone is set to silent.

To mute howler.js on Android, the user must manually turn down their “Media” volume slider to zero.

How to Manage Silent Mode as a Developer

If you are building a web application and need to handle silent mode constraints, consider the following approaches:

1. Leverage the html5 Property

If your application serves long-form audio (like podcasts or music tracks) where users expect audio to play even on silent mode, initialize your Howl instances with the HTML5 fallback enabled:

const sound = new Howl({
  src: ['audio.mp3'],
  html5: true // Forces HTML5 Audio, which is treated as media playback
});

2. Native Wrapper Configurations (Cordova, Capacitor, React Native)

If you are wrapping your web app into a native mobile application using Cordova or Capacitor, you can bypass the iOS silent switch. You must configure the native audio session category to “Playback” instead of “Ambient” using a native plugin. This tells iOS that your app’s primary purpose is playing media, which overrides the physical mute switch.