Wavesurfer.js: authorization headers enhancement

[sht5]

Hello,
i am looking for a way to add an authorization header to the requests wavesurfer makes when loading a url. i want to load a url dependent on authorization.
thanks

[katspaugh]

You can load the audio on your own (using XMLHttpRequest or the Fetch API), and then pass the response body to this internal method called loadArrayBuffer.

[sht5]

actually its also possible to just send a jwt as a query parameter on the
url so this solves the problem for me

On Mon, Mar 13, 2017 at 4:05 PM, katspaugh [e-mail] wrote:

You can load the audio on your own (using XMLHttpRequest or the Fetch
API), and then pass the response body to this internal method
https://github.com/katspaugh/wavesurfer.js/blob/master/src/wavesurfer.js#L361
called loadArrayBuffer.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/katspaugh/wavesurfer.js/issues/1038#issuecomment-286116404,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABw7UdcJLcQ1JaDq0twhqXCc-M41PPLlks5rlU0pgaJpZM4MbNSv
.

[TrevorHinesley]

Is there no better way to do this? I have to have authorization as well, and the tokens are long-lived so passing them as a query parameter isn't secure. It needs to be a header.

Can you give an example of how to load the file ourselves?

[TrevorHinesley]

For anyone wondering any easy fix for this, I overrode the WaveSurfer.util.ajax method like so:

// Other than where specified, this should be the same as:
//   https://raw.githubusercontent.com/katspaugh/wavesurfer.js/master/src/util.js
//
// Override ajax function to add our auth headers
WaveSurfer.util.ajax = function (options) {
    var ajax = Object.create(WaveSurfer.Observer);
    var xhr = new XMLHttpRequest();
    var fired100 = false;

    xhr.open(options.method || 'GET', options.url, true);

    // START added code
    xhr.setRequestHeader("Authorization", "Bearer <your-auth-token>")
    // END added code

    xhr.responseType = options.responseType || 'json';

    xhr.addEventListener('progress', function (e) {
        ajax.fireEvent('progress', e);
        if (e.lengthComputable && e.loaded == e.total) {
            fired100 = true;
        }
    });

    xhr.addEventListener('load', function (e) {
        if (!fired100) {
            ajax.fireEvent('progress', e);
        }
        ajax.fireEvent('load', e);

        if (200 == xhr.status || 206 == xhr.status) {
            ajax.fireEvent('success', xhr.response, e);
        } else {
            ajax.fireEvent('error', e);
        }
    });

    xhr.addEventListener('error', function (e) {
        ajax.fireEvent('error', e);
    });

    xhr.send();
    ajax.xhr = xhr;
    return ajax;
}

Worked like a charm :)

[TrevorHinesley]

Actually, this DOESN'T work because xhr keeps the Authorization header on any redirects. This is a problem if the redirect is an S3 URL that expires, because Amazon will error out (it doesn't like unnecessary headers).

[thijstriemstra]

Fyi, with #1310 it's now possible to supply a xhr option to wavesurfer to configure XHR in util.ajax.

e.g.

options.xhr = {requestHeaders: [{
    key: "Authorization",
    value: "Bearer <your-auth-token>"
}]};

[asystemsaus]

some advice please... how do I implement the xhr authentication ?
Everything else works perfectly, and I think the whole wavesurfer.js is brilliant but i'm stuck on getting authentication to work.

I cant find any reference into how to add it.
I was thinking it should be
wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'darkorange',
progressColor: 'green',
splitChannels: true,
height: 80,
requestHeaders: [{
key: "Authorization",
value: "Bearer " + make_base_auth(U, P)
}]
});

function make_base_auth(username, password) {
var tok = username + ':' + password;
var hash = btoa(tok);
// // console.log(' Hash of password = ' + hash);
return "Basic " + hash;
}

But i'm not seeing it in the request headers and i'm getting (Full authentication is required to access this resource)
any help is greatly appreciated.

[thijstriemstra]

See previous comment, its called xhr option that is an object.

[asystemsaus]

Thijstriemstra, would it be possible to point me in the right direction on how to use it ?
an example would be good.
As you can guess, i'm not an expert at javascript .

[thijstriemstra]

wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'darkorange',
progressColor: 'green',
splitChannels: true,
height: 80,
xhr: {requestHeaders: [{
key: "Authorization",
value: "Bearer " + make_base_auth(U, P)
}]}
});

[asystemsaus]

Thijstriemstra, thanks for that.
I am using wavesurfer to display wave form for recorded calls. and of course they are encrypted. I was first downloading the file and saving locally, once it had been unencrypted, but that broke the security model. I wanted to get them direct.
I ended up saving the unencrypted to a blob and then using wavesurfer.loadBlob() which works brilliantly.

Users can add notes to calls, which saves the event time. Is there a way to have an icon of some sort displayed at a particular time in the waveform. or under it ?
Basically to show what type of event occured at a particular time ?

[thijstriemstra]

@asystemsaus take a look at annotations example and timeline plugin/example. Please open a new ticket for questions.

[danielkrich]

wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'darkorange',
progressColor: 'green',
splitChannels: true,
height: 80,
xhr: {requestHeaders: [{
key: "Authorization",
value: "Bearer " + make_base_auth(U, P)
}]}
});

Hey there @thijstriemstra, thanks for this comment.
This works, but it works only with "WebAudio" backend. I need to use "MediaElement" because I want partial file loading (start playing before the whole file downloads).
How can I use credentials in this case?

Thanks

[thijstriemstra]

@danielkrich preload it using ajax (e.g. jquery of whatever javascript) into an audio element and pass that audio element to wavesurfer?