Howler.js: set http header

[st-h]

any chance to add a property to set a http header for the request that is retrieving the audio? This would be useful for instance if the audio file is only available to authenticated users.

[st-h]

I have been looking into this more closely and it could be implemented very easily for web audio.
However I could not find a way to support http headers with HTML5 audio. Any ideas on that?

There still are cookies to support sending data like a token, however the support on android has been broken for quite a while ( https://code.google.com/p/android/issues/detail?id=66050 )

As a last resort it would be possible to send the required data via query params, however this could be a quite dangerous thing to do if the link to the audio file is directly accessible to the user. Sharing the link to the audio file would automatically share the session.

[carlnordenfelt]

Any news on this?
We must set the Authorization header when fetching the audio file which is seemingly not possible at the moment.

[Midnighter]

Similar use-case: I need to set Authorization: Bearer <token> header. Once possible I would also like to set the Accept: audio/mpeg3 header in order to retrieve different content type from the same endpoint.

Seeing as this is not currently possible, can we load the data stream with something like axios into the local state of a component and then open that data from the local variable with Howler?

~I tried the following but when I call howl.play() the Howl appears stuck in 'loading' state.~

const source = 'http://great.sound.files');
let blob = null;
let url = null;
let howl = null;
axios
  .get(source, {
    headers: {
      "Accept": "audio/mpeg3",
      'Authorization': `Bearer ${token}`
    },
    responseType: "arraybuffer"
  })
  .then(response => {
    blob = new Blob([response.data], { type: response.headers["content-type"] });
    url = URL.createObjectURL(blob);
    howl = new Howl({
        src: [url],
        format: "mp3"
      }
    );
  })
  .catch(error => {
    console.error(error);
  });

Edit: Setting the responseType to "arraybuffer" actually makes this work :champagne: :tada:

[st-h]

I do not think this will ever be possible as there is no way I am currently aware of to set a header when using the html5 audio element. As I mentioned above this can easily be done when using web audio.

Understandably just implementing one of those two will be quite an issue for howler, as its sets out to be something entirely different - a lib that maintains feature parity across methods of playback:

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.

So, just adding support for a custom header when using web audio only, will defeat howlers purpose, as you no longer can rely on playback working across platforms. In the end I personally think it is much more feasible to implement your own audio playback using web audio if you have that specific needs. Otherwise I have listed a few workarounds in my post above. And if you want to take a wild ride, I would not be suprised if you can add the header using a service worker - however, I might have read somewhere that there were ( are? ) limitations when serving audio files via a service worker, but I haven't had the time to look into that yet.

I'll leave this issue open, as it this topic seems to come up regularly, but please feel free to close @goldfire

[goldfire]

FYI, this was added in the latest release a few weeks ago.