Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 911
jhnnycrvr Avatar asked Sep 12 '12 19:09

jhnnycrvr


People also ask

How does big data handle ajax response?

1 Answer. Show activity on this post. Try adding a complete function to see if you are timing out or some other error is happening: If it is a timeout, add a timeout property to the ajax call. Shouldn't he just change the failure function to error , its correct specification?

What type of data does ajax return?

In the jQuery ajax() function we are not providing any content type or data type. So by default it will return JSON data as expected.

Does ajax return a promise?

ajax returns, which is a jqXHR object that conforms to the promise interface. If there is a failure, the outer fail function is invoked. The outer fail function is also invoked if the processData function fails. When both the getData and processData functions are successful, the outer done method is invoked.

What is blob in jQuery?

The Blob Interface and Binary Data. A Blob object refers to a byte sequence, and has a size attribute which is the total number of bytes in the byte sequence, and a type attribute, which is an ASCII-encoded string in lower case representing the media type of the byte sequence.


3 Answers

About your question, it seems jQuery does not support it yet. Before using it as I suggested below, consider checking if the feature is available.

With XHTMLRequest, you can trick your server and receive a binary string representing the bytes you want from the server. It works perfectly.

var xhr = new XMLHttpRequest(); xhr.open('GET', '/your/audio/file.wav', true);  // Here is the hack xhr.overrideMimeType('text/plain; charset=x-user-defined');  xhr.onreadystatechange = function(event) {   if ( this.readyState == 4 && this.status == 200 ) {     var binaryString = this.responseText;      for (var i = 0, len = binaryString.length; i < len; ++i) {       var c = binaryString.charCodeAt(i);       var byte = c & 0xff; //it gives you the byte at i       //Do your cool stuff...      }   } };  xhr.send(); 

It works, it's common... but... it is still a hack.

With XHTML Request Level 2, you can specify the responseType as 'arraybuffer' and receive the ArrayBuffer actually. It is much nicer. The problem is to check if your browser support this feature.

var xhr = new XMLHttpRequest(); xhr.open('GET', '/your/audio/file.wav', true); xhr.responseType = 'arraybuffer';  xhr.onload = function(e) {   if (this.status == 200) {     //Do your stuff here   } };  xhr.send(); 

Hope I helped.

like image 115
Walter Macambira Avatar answered Sep 23 '22 04:09

Walter Macambira


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!

});
like image 33
Dylan Cristy Avatar answered Sep 23 '22 04:09

Dylan Cristy


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'}
})
like image 20
dieterw Avatar answered Sep 20 '22 04:09

dieterw