How to Use Format Fallbacks in Howler.js

This article provides a practical guide on how to configure multiple audio format fallbacks in Howler.js to ensure reliable playback across all modern and legacy web browsers. You will learn how to structure your audio source arrays, why the ordering of your audio files matters, and how to handle edge cases like dynamic URLs.

To handle multiple format fallbacks effectively in Howler.js, you must pass an array of file paths to the src property of the Howl instantiation. Howler.js will automatically detect the browser’s capabilities and play the first audio format in the list that the user’s browser supports.

Here is a basic implementation:

const sound = new Howl({
  src: ['audio/track.webm', 'audio/track.mp3'],
  autoplay: false,
  loop: false,
  volume: 0.5
});

1. Order Your Formats Correctly

Howler.js evaluates the src array sequentially from first to last. To optimize performance and bandwidth, you should always list your highly compressed, modern formats first, followed by older compatibility formats.

The recommended order is: 1. WebM (.webm): Excellent compression and quality, supported by most modern browsers. 2. Ogg Vorbis (.ogg): Great open-source fallback, widely supported except in older iOS/Safari versions. 3. MP3 (.mp3): The universal fallback format supported by virtually every browser and legacy system.

2. Force Format Detection with the format Property

If you are streaming audio, loading files from a CDN, or using API endpoints that do not include file extensions (e.g., https://example.com/stream?id=102), Howler.js may fail to recognize the file type.

You can resolve this by explicitly defining the order of formats using the format property. This tells Howler.js how to decode the URLs provided in the src array:

const stream = new Howl({
  src: [
    'https://api.example.com/music/stream/high',
    'https://api.example.com/music/stream/low'
  ],
  format: ['webm', 'mp3']
});

In this setup, Howler.js will treat the first URL as a WebM file and the second as an MP3 file, matching the array indexes of the src and format properties.

3. Check Browser Support Programmatically

If you need to verify which formats are supported by the user’s current browser before initializing your audio objects, you can use the static helper method Howler.codecs():

// Returns true or false depending on browser capability
const canPlayWebm = Howler.codecs('webm');
const canPlayMp3 = Howler.codecs('mp3');

By combining optimized format ordering with explicit format declarations, you ensure a seamless, high-quality audio experience across all platforms.