How can we add Authentication Headers to WaveSurfer v7 beta?

[psavva]

As per the title, how do we add authentication headers to WaveSurfer Beta?

In the v6, I would do so using
options.xhr.requestHeaders

How could i achieve the same in v7?

[katspaugh]

Not yet possible. I will restore this option.
As a workaround, you can fetch the file yourself as a blob, create a URL object from it and pass that URL instead of the direct http URL.

[katspaugh]

You can now specify custom fetch params in the fetchParams option (see https://wavesurfer-js.org/docs/types/wavesurfer.WaveSurferOptions). Cheers!

[ceelian]

Thank you. I can't get it to work, no headers are present in the request when inspecting. Any Idea what I miss here or is wrong?

        this.wavesurfer = WaveSurfer.create({
          container: this.waveformEl.nativeElement,
          waveColor: 'violet',
          progressColor: 'purple',
          mediaControls: false, 
          backend: 'MediaElement',
          url: data.trackUrl,
          fetchParams: {
            mode: 'no-cors',
            credentials: "include",
            headers: [['Authorization', `Basic  ${data.authToken}`], ['X-TEST', 'test header']],
          }
        });
       this.wavesurfer.load(trackUrl);

[katspaugh]

Headers must be an object, not an array. See https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options

[ceelian]

Thank you for the quick reply, it is really a great library! Regarding to the issue and your suggestion, that's what I tried first, without success. Can the issue be related to CORS? Still, AFAIK CORS mechanisms would intercept after getting the response, so the headers should be added and visible in Chrome Inspector under all circumstances. As I am testing with localhost and the mp3 file is located on an external domain protected by auth basic. I am using Wafesurfer.js Version 7.7.2.

[katspaugh]

In JS, requests to external domains are only possible if that domain enables CORS. There's nothing you can do on the requesting side to affect that. See https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS for more details.

[ceelian]

Thank you, that explains the behavior.