22

我开始使用 Web Audio API，只是想知道是否可以使用 jQuery 的 $.ajax 或 $.load 函数来生成接收音频数据的 XMLHttpRequest。$.ajax 或 $.load 是否支持 responseType=arrayBuffer？

编辑：

好的，这就是我到目前为止所拥有的：

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

但我需要返回一个 ArrayBuffer。那么如何将响应转换为 ArrayBuffer？

4

5 回答 5

21

关于您的问题，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();

希望我有所帮助。

于 2013-05-22T17:07:20.273 回答
6

实际上，有一种更简单的方法可以使用 jQuery 和本机来做到这一点，XMLHttpRequest而不必仅使用XMLHttpRequest或必须使用插件，因此您仍然可以使用 jQuery 样式/语法进行编码。$.ajax()is的选项之一xhr，jQuery 文档将其描述为（强调我的）：

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

类型：函数（）

创建 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!

});
于 2020-03-06T19:51:12.933 回答
2

我使用了Dylan 的答案，它奏效了，但结果$.ajax请求不再是完整的 Promise（我不能再将它与它结合起来Promise.all）。相反，我通过使用xhrFields文档中的设置实现了相同的目的。

$.ajax({
    url: url,
    method: 'GET',
    xhrFields: { responseType: 'arraybuffer'}
})
于 2022-01-31T15:19:30.050 回答
1

我使用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;

};

于 2017-08-14T08:01:04.450 回答
0

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

$.get("https://www.website.com/image.png", function(data)
{
    console.log("received data", data);
}, "arraybuffer");
于 2020-01-16T08:39:18.843 回答