howler.js icon indicating copy to clipboard operation
howler.js copied to clipboard

XHR option not setting custom header in request

Open StephenTHendrix opened this issue 3 years ago • 2 comments

Hi!

I'm using version 2.2.1 and trying to play an mp3 file from an s3 bucket that requires an api key:

const sound = new Howl({
      src: ['my-url'],
      format: ['mp3'],
      html5: true,
      buffer: true,
      onloaderror: (id, error) => console.log(2, id, error),
      xhr: {
        method: "GET",
        headers: {
          "custom-header-name": "my-key",
        },
      },
    });

When I check the network tab, though, the request doesn't include the headers that I set and so returns 403. I see the call working in Postman, but I still tried including withCredentials: true in any combination with html5 and buffer that I can.

I know it probably isn't super useful since I'm not even getting the file in the first place, but the onloaderror prints (for example) Error loading: 1000, 4.

Thanks so much! I'm excited to get started with howler.

StephenTHendrix avatar Jun 25 '21 01:06 StephenTHendrix

The xhr option only works with Web Audio since hTML5 Audio isn't using XHR to download the audio.

goldfire avatar Jun 27 '21 23:06 goldfire

@goldfire does that mean that howler does not support streaming / buffering of audio when using XHR?

simonv3 avatar May 06 '22 15:05 simonv3