Erlaubt jQuery $.ajax oder $.load für responseType arrayBuffer?

Ich beginne gerade mit der Web-Audio-API und frage mich nur, ob es möglich ist, die Funktionen $.ajax oder $.load von jQuery zu verwenden, um die XMLHttpRequest zu erstellen, die die Audiodaten empfängt. Unterstützen $.ajax oder $.load responseType=arrayBuffer?

BEARBEITEN:

Ok, also das habe ich bisher:

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

aber ich muss einen ArrayBuffer zurückgeben. Wie konvertiere ich die Antwort in einen ArrayBuffer?

Zu Ihrer Frage scheint jQuery sie noch nicht zu unterstützen. Bevor Sie es wie unten vorgeschlagen verwenden, sollten Sie prüfen, ob die Funktion verfügbar ist.

Mit XHTMLRequest können Sie Ihren Server austricksen und eine binäre Zeichenfolge erhalten, die die gewünschten Bytes vom Server darstellt. Es funktioniert perfekt.

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();

Es funktioniert, es ist üblich … aber … es ist immer noch ein Hack.

Mit XHTML Request Level 2 können Sie den responseType als ‘arraybuffer’ angeben und den ArrayBuffer tatsächlich erhalten. Es ist viel schöner. Das Problem besteht darin, zu überprüfen, ob Ihr Browser diese Funktion unterstützt.

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();

Hoffe, ich habe geholfen.

Tatsächlich gibt es einen einfacheren Weg, dies mit jQuery und dem nativen zu tun XMLHttpRequest ohne verwenden zu müssen nur das XMLHttpRequest oder ein Plugin verwenden müssen, damit Sie immer noch im jQuery-Stil / in der jQuery-Syntax codieren können. Eine der Optionen für $.ajax() ist xhrwas die jQuery-Dokumentation beschreibt als (Hervorhebung von mir):

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

Typ: Funktion()

Rückruf zum Erstellen des XMLHttpRequest-Objekts. Standardmäßig ActiveXObject, wenn verfügbar (IE), andernfalls XMLHttpRequest.
Überschreiben Sie, um Ihre eigene Implementierung für XMLHttpRequest bereitzustellen oder Erweiterungen der Fabrik.

Also, um eine zu bekommen ArrayBuffer als Antwort auf a $.ajax() anfordern, alles, was Sie tun müssen, ist:

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!

});

Ich habe Dylans Antwort verwendet und es hat funktioniert, aber das Ergebnis $.ajax Anfrage ist kein vollständiges Versprechen mehr (ich konnte es nicht mit kombinieren Promise.all mehr). Stattdessen habe ich dasselbe erreicht, indem ich die verwendet habe xhrFields Einstellung aus der Dokumentation.

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

Ich habe die Daten vom Server als String (der in String base64 codiert ist) mit Ajax Get Json abgerufen und dann auf der Clientseite in Base64 und dann in den Array-Puffer decodiert.

Beispielcode

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;

};

Dafür gibt es eine einfache jQuery-Erweiterung:
https://github.com/vobruba-martin/jquery.ajax.arraybuffer

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