Howler.js Default Audio Extension Priority

This article explains how howler.js resolves audio file formats, how it determines which audio extension to play first, and the recommended file extension order you should use in your code for optimal browser compatibility and performance.

How Howler.js Resolves Audio Formats

Howler.js does not have a strict, hardcoded default audio extension priority. Instead, priority is determined by the order of the sources you define in the src array in your Howl configuration.

When you load a sound, Howler.js loops through your list of audio sources from first to last. It checks each file extension against the browser’s capabilities using its internal codec support checker (Howler._codecs). It will immediately load and play the first format in your list that the current browser supports.

Because Howler.js respects the order of your src array, you must order your audio files strategically. To get the best balance of fast loading times, high quality, and universal browser compatibility, you should list your audio sources in the following order:

  1. WebM (.webm / .weba): This should always be listed first. It offers superior compression and high quality, making it ideal for fast web loading. It is supported by almost all modern browsers.
  2. Ogg (.ogg): Use this as a secondary modern format, particularly for older browsers that support Ogg Vorbis but not WebM.
  3. MP3 (.mp3): This is the universal fallback. While it has licensing limitations and larger file sizes than WebM, virtually every browser and device can play MP3 files.
  4. WAV (.wav): This should be your last resort. WAV files are uncompressed and very large, but they are universally supported.

Code Example

Here is how you should structure your Howler.js instance to implement the recommended format priority:

const sound = new Howl({
  src: ['audio/track.webm', 'audio/track.mp3', 'audio/track.wav']
});

In this setup, Howler.js will first try to play the WebM version. If the browser is older and does not support WebM, Howler.js will skip to the MP3 version. If both fail, it will fall back to the WAV file.