Force Howler.js to Use Specific Audio Extension

This article provides a quick guide on how to force the Howler.js library to use a specific audio extension or format during playback. By default, Howler.js automatically detects the audio format from the file extension in the source URL; however, when working with dynamic streams, API endpoints, or URLs that lack standard file extensions, you must manually define the format. Below, you will learn how to use the format property to ensure proper audio decoding.

To force Howler.js to recognize a specific audio format, you need to use the format property within the Howl configuration object. This property accepts an array of strings representing the file extensions you want to force Howler.js to use.

Here is a direct code example showing how to implement this:

const sound = new Howl({
  src: ['https://example.com/api/get-track?id=9876'],
  format: ['mp3']
});

In the example above, even though the source URL does not end in .mp3, Howler.js is forced to treat and decode the incoming stream as an MP3 file.

Why Use the Format Property?

There are two main scenarios where forcing the audio extension is necessary:

  1. Dynamic URLs and API Endpoints: When your audio source is served dynamically via a database or backend routing (e.g., /stream?track=rock), Howler.js cannot parse the file type from the URL string.
  2. Base64/Data URIs: When loading audio directly from base64 encoded strings, specifying the exact format ensures the Web Audio API can decode the data correctly.

By defining the format array, you bypass Howler’s automatic extension detection and guarantee that the correct codec is used for playback.