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

实际上，有一种使用jQuery和本机XMLHttpRequest的简便方法，而不必只使用 XMLHttpRequest或使用插件，因此您可以仍然以jQuery样式/语法编码。 $.ajax()的选项之一是xhr，jQuery documentation描述为（强调我的）：

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

类型：Function（）

用于创建XMLHttpRequest对象的回调。默认为 ActiveXObject（如果可用）（IE），否则为XMLHttpRequest。 重写以提供您自己的XMLHttpRequest实现，或者工厂的增强功能。

因此，为了获得ArrayBuffer作为对$.ajax()请求的响应，您要做的就是：

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!

});

Answer 3

我使用ajax get json从服务器获取数据作为字符串（base64编码为字符串）然后在客户端我将其解码为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;

};

Answer 4

对此有一个简单的jQuery扩展： https://github.com/vobruba-martin/jquery.ajax.arraybuffer

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

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

4 个答案: