How to Play Base64 Audio with Howler.js

Howler.js simplifies web audio playback by natively supporting base64 encoded audio strings directly within its core configuration. By passing a properly formatted data URI to the src property and explicitly declaring the audio format, developers can bypass external file loading and stream audio directly from memory. This article explains how Howler.js processes these base64 strings, the technical requirements for implementation, and best practices for ensuring cross-browser compatibility.

How to Implement Base64 in Howler.js

To play base64 encoded audio, you must pass the audio data as a Data URI to the src array of the Howl constructor. A standard base64 audio Data URI follows this format: data:audio/[codec];base64,[data].

Here is a basic implementation example:

const sound = new Howl({
  src: ['data:audio/mp3;base64,SUQzBAAAAAAAI...'],
  format: ['mp3']
});

sound.play();

The Importance of the ‘format’ Property

When loading standard audio files, Howler.js automatically detects the audio format by analyzing the file extension in the URL. However, when using base64 strings, Howler.js cannot reliably parse the extension from the data URI. To prevent playback failures, you must explicitly define the format property (e.g., ['mp3'], ['wav'], or ['ogg']) in the configuration object.

Decoding and Playback Mechanics

Howler.js processes base64 strings differently depending on the active playback budget:

Web Audio API (Default): Howler.js converts the base64 data URI into an ArrayBuffer and decodes the binary audio data using the browser’s native AudioContext.decodeAudioData() method. This creates an in-memory AudioBuffer, allowing for precise timing, multi-channel panning, and zero-latency playback.
HTML5 Audio Fallback: If the Web Audio API is unavailable, or if you force HTML5 audio by setting html5: true, Howler.js passes the base64 string directly to the src attribute of a standard HTML5 <audio> element.

Performance Considerations

While base64 encoding is ideal for embedding short sound effects directly into your application code, it is inefficient for larger files. Base64 strings are approximately 33% larger than their binary counterparts, which increases memory consumption and initial page load times. For music or lengthy voiceovers, loading external audio files over HTTP is the preferred method.