'Does jQuery $.ajax or $.load allow for responseType arrayBuffer?

I'm getting started with the Web Audio API and just wondering if it's possible to use jQuery's $.ajax or $.load functions to make the XMLHttpRequest that receives the audio data. Do $.ajax or $.load support responseType=arrayBuffer?

EDIT:

Ok, so here's what I have so far:

function loadAudio() {
    $.ajax({
            url: sourceUrl
        }).done(function(response){
            return response;
        })
    }

but I need to return an ArrayBuffer. So how do I convert the response into an ArrayBuffer?

jqueryajaxxmlhttprequest


Solution 1:[1]

Actually there is an easier way to do this using jQuery and the native XMLHttpRequest without having to use only the XMLHttpRequest or having to use a plugin, so you can still code in jQuery style/syntax. One of the options for $.ajax() is xhr, which the jQuery documentation describes as (emphasis mine):

xhr (default: ActiveXObject when available (IE), the XMLHttpRequest otherwise)

Type: Function()

Callback for creating the XMLHttpRequest object. Defaults to the ActiveXObject when available (IE), the XMLHttpRequest otherwise. Override to provide your own implementation for XMLHttpRequest or enhancements to the factory.

So, in order to get an ArrayBuffer as a response to a $.ajax() request, all you have to do is:

var xhrOverride = new XMLHttpRequest();
xhrOverride.responseType = 'arraybuffer';

$.ajax({
    url: '/url/of/your/binary/data',
    method: 'GET',
    xhr: function() {
        return xhrOverride;
    }
}).then(function (responseData) {

    // responseData is an ArrayBuffer!

});

Solution 2:[2]

I used Dylan's answer and it worked, but the resulting $.ajax request is not a full Promise anymore (I couldn't combine it with Promise.all anymore). Instead, I achieved the same by using the xhrFields setting from the documentation.

$.ajax({
    url: url,
    method: 'GET',
    xhrFields: { responseType: 'arraybuffer'}
})

Solution 3:[3]

i fetched the data from server as string(which is base64 encoded to string) using ajax get json and then on client side i decoded it to base64 and then to array buffer.

Sample code

function solution1(base64Data) {

var arrBuffer = base64ToArrayBuffer(base64Data);

// It is necessary to create a new blob object with mime-type explicitly set
// otherwise only Chrome works like it should
var newBlob = new Blob([arrBuffer], { type: "application/pdf" });

// IE doesn't allow using a blob object directly as link href
// instead it is necessary to use msSaveOrOpenBlob
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
    window.navigator.msSaveOrOpenBlob(newBlob);
    return;
}

// For other browsers: 
// Create a link pointing to the ObjectURL containing the blob.
var data = window.URL.createObjectURL(newBlob);

var link = document.createElement('a');
document.body.appendChild(link); //required in FF, optional for Chrome
link.href = data;
link.download = "file.pdf";
link.click();
window.URL.revokeObjectURL(data);
link.remove();

}

function base64ToArrayBuffer(data) {
var binaryString = window.atob(data);
var binaryLen = binaryString.length;
var bytes = new Uint8Array(binaryLen);
for (var i = 0; i < binaryLen; i++) {
    var ascii = binaryString.charCodeAt(i);
    bytes[i] = ascii;
}
return bytes;

};

Solution 4:[4]

There is a simple jQuery extension for this: https://github.com/vobruba-martin/jquery.ajax.arraybuffer

$.get("https://www.website.com/image.png", function(data)
{
    console.log("received data", data);
}, "arraybuffer");

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dylan Cristy
Solution 2 dieterw
Solution 3 Sajjad Ali Khan
Solution 4 John

Related Questions