XHR headers not sent, misspelled headers options in util.fetchFile

Wavesurfer.js version(s): 4.0.1 Browser and operating system version(s): Firefox, Ubuntu 20.04 Code needed to reproduce the issue:

this.wave = WaveSurfer.create({
    container: '#waveform',
    waveColor: '#3f51b5',
    progressColor: 'blue',
    xhr: {
        [{ key: 'Authorization', value: 'Bearer token' }]
    }
});

No header sent in request. Checked the code and getArrayBuffer function calls util.fetchFile with options containing params.xhr ( containings headers )

    getArrayBuffer(url, callback) {
        let options = Object.assign(
            {
                url: url,
                responseType: 'arraybuffer'
            },
            this.params.xhr
        );
        const request = util.fetchFile(options);
        ...
    }

when checking util.fetchFile i see it looks for options.requestHeaders, instead of options.headers i think.

    // check if headers have to be added
    if (options && options.requestHeaders) {
        // add custom request headers
        options.requestHeaders.forEach(header => {
            fetchHeaders.append(header.key, header.value);
        });
    }

[codinbox]

Not a bug but a doc mistake. as you said the right option to use is xhr: { requestHeaders: {} } and not xhr: { headers: {} } I changed it in my code and now my keys are sent.

[flaff]

Maybe a good idea to update the doc to.

Where is the doc error visible?

Documentation > Options > xhr

XHR options. For example: let xhr = { cache: ‘default’, mode: ‘cors’, method: ‘GET’, credentials: ‘same-origin’, redirect: ‘follow’, referrer: ‘client’, headers: [ { key: ‘Authorization’, value: ‘my-token’ } ]};