How to Play Audio in Internet Explorer with Howler.js

Supporting audio playback on legacy browsers like Internet Explorer (IE 9, 10, and 11) presents unique challenges due to their lack of support for the modern Web Audio API. This article explains how to configure and use the howler.js library to ensure reliable audio playback on older versions of Internet Explorer by utilizing HTML5 Audio fallbacks, choosing compatible file formats, and resolving common integration issues.

Force HTML5 Audio Fallback

Older versions of Internet Explorer do not support the Web Audio API, which howler.js uses by default for high-performance audio playback. To make audio work in IE 9, 10, and 11, you must force howler.js to use HTML5 Audio instead.

You can achieve this by setting the html5 property to true when instantiating your Howl object:

var sound = new Howl({
  src: ['audio.mp3'],
  html5: true
});

sound.play();

By enabling html5: true, howler.js bypasses the Web Audio API and streams the audio using the standard HTML5 <audio> element, which is widely supported in IE 9 and above.

Use Compatible Audio Formats

Internet Explorer has limited codec support compared to modern browsers. To ensure your audio plays successfully on IE, you must provide the correct file formats:

Always list your MP3 file as the primary source or fallback in the src array:

var sound = new Howl({
  src: ['audio.webm', 'audio.mp3'], // IE will skip webm and play the mp3
  html5: true
});

Resolve CORS and Protocol Issues in IE

If you host your audio files on a different domain or a Content Delivery Network (CDN), Internet Explorer may block the playback due to Cross-Origin Resource Sharing (CORS) security restrictions.

To resolve this: 1. Ensure your storage server delivers the appropriate CORS headers (e.g., Access-Control-Allow-Origin: *). 2. If issues persist in IE 9, host the audio files on the same domain as your website to avoid cross-domain security blocks entirely.

Handle IE Cached Audio Bugs

Older versions of Internet Explorer sometimes fail to reload or replay audio files that have been cached. If you experience issues where audio only plays once, you can append a unique query string (cache-buster) to the audio source URL:

var timestamp = new Date().getTime();
var sound = new Howl({
  src: ['audio.mp3?v=' + timestamp],
  html5: true
});

This forces IE to fetch the audio file directly from the server rather than loading a buggy cached version.