jQuery $ .ajax或$ .load是否允許responseType arrayBuffer？

Question

我開始使用Web Audio API，只是想知道是否可以使用jQuery的$ .ajax或$ .load函數來創建接收音頻數據的XMLHttpRequest。 $ .ajax或$ .load支持responseType = arrayBuffer？

編輯：

好了，所以這是我到目前爲止有：

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

但我需要返回一個ArrayBuffer。那麼如何將響應轉換爲ArrayBuffer呢？

Answer 1

關於你的問題，看來jQuery目前還不支持它。在按照我下面的建議使用它之前，請考慮檢查功能是否可用。

使用XHTMLRequest，您可以欺騙您的服務器並接收表示您希望從服務器獲取的字節的二進制字符串。它完美的作品。

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

它的作品，這是常見的......但...它仍然是一個黑客攻擊。

使用XHTML請求級別2，您可以將responseType指定爲「arraybuffer」並實際接收ArrayBuffer。它更好。問題是要檢查您的瀏覽器是否支持此功能。

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

希望我幫了忙。

Answer 2

我從服務器獲取數據作爲字符串（這是base64編碼爲字符串）使用ajax get json然後在客戶端我解碼到base64，然後到數組緩衝區。

示例代碼

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; 

};