How to Set XHR Configuration in Howler.js

When loading audio files from secured servers or external APIs, you often need to customize the network request with custom headers, authentication tokens, or credentials. This article provides a direct guide on how to configure the XMLHttpRequest (XHR) settings in Howler.js to fetch audio files securely and efficiently.

To set the XHR configuration in Howler.js, you must pass an xhr object inside the options when initializing a new Howl instance. The xhr object allows you to define custom HTTP methods, request headers, and credential settings.

Important Requirement: Disable HTML5 Audio

For custom XHR configurations to work, you must ensure that the html5 property is set to false (which is the default behavior). If html5 is set to true, Howler.js uses the browser’s standard HTML5 <audio> element to stream the file directly, which bypasses the XHR request pipeline and prevents custom headers from being applied.

Code Example

Here is how to configure a Howl instance to fetch audio with custom authorization headers and credentials:

const sound = new Howl({
  src: ['https://api.yourserver.com/v1/audio/track.mp3'],
  html5: false, // Required for XHR configuration to take effect
  xhr: {
    method: 'GET',
    headers: {
      'Authorization': 'Bearer your-access-token-here',
      'Accept': 'audio/mpeg'
    },
    withCredentials: true
  },
  onload: function() {
    console.log('Audio loaded successfully with custom XHR headers!');
  },
  onloaderror: function(id, error) {
    console.error('Failed to load audio:', error);
  }
});

Configuration Options Breakdown