2012-09-12 16 views
17

Sto iniziando con l'API Web Audio e mi chiedo solo se è possibile utilizzare le funzioni $ .ajax o $ .load di jQuery per rendere XMLHttpRequest che riceve i dati audio. $ .ajax o $ .load support responseType = arrayBuffer?

EDIT:

Ok, ecco quello che ho finora:

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

ma ho bisogno di restituire un ArrayBuffer. Quindi, come posso convertire la risposta in un ArrayBuffer?

+0

Si dovrebbe provare e vedere. – Musa

risposta

16

Sulla tua domanda, sembra che jQuery non lo supporti ancora. Prima di utilizzarlo come suggerito di seguito, è consigliabile verificare se la funzionalità è disponibile.

Con XHTMLRequest, puoi ingannare il tuo server e ricevere una stringa binaria che rappresenta i byte che vuoi dal server. Funziona perfettamente.

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

Funziona, è comune ... ma ... è ancora un hack.

Con XHTML Richiesta livello 2, è possibile specificare responseType come 'arraybuffer' e ricevere effettivamente ArrayBuffer. È molto più bello Il problema è verificare se il tuo browser supporta questa funzionalità.

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

Spero di aver aiutato.

1

ho recuperato i dati dal server come stringa (che è codificata base64 in stringa) utilizzando ajax get json e quindi sul lato client l'ho decodificato in base64 e quindi nel buffer di array.

codice di esempio

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; 

};