Search code examples
jqueryajaxxmlhttprequest

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?


Solution

  • 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.