FileReader readAsArrayBuffer() 与本地 mp3 文件

Question

我已经查看了与 FileReader 和 readAsArrayBuffer() 有关的所有类似问题，但没有任何运气。

我正在尝试使用网络音频 API 读取本地 mp3 文件并使用 FileReader 对其进行处理，以便将其用于某些音乐可视化。

这是我目前拥有的：

    var file = "../../audio/magic_coldplay.mp3";
    var fileReader = new FileReader();

    fileReader.onload = function (e) {
            var fileResult = e.target.result;
            visualizer.start(fileResult);
    };

    fileReader.onerror = function (e) {
        debugger
    };

    fileReader.readAsArrayBuffer(file);

我收到错误："Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'."

所以我猜文件不是 Blob。我在网上看到的示例让用户上传他们自己的 mp3 文件。我怎样才能使它与本地 mp3 一起工作？

感谢您的指点！

Answer 1

在你的代码中，file是一个字符串，最好重命名为url； FileReader 不知道如何处理字符串，因此会抛出您遇到的错误。

由于这个字符串是一个指向文件的URI，你要做的就是从URI的另一端获取数据。

为此，您至少有两个相似的 API：传统的 XHR 和更新的 Fetch。

这两个 API 都允许您将文件作为 Blob 请求，以便您可以在获取后将其与 FileReader API 一起使用：

// traditional XHR
var xhr = new XMLHttpRequest();
xhr.open('get', url);
xhr.responseType = 'blob'; // we request the response to be a Blob
xhr.onload = function(e){
  fileReader.readAsArrayBuffer(this.response);
}
xhr.send();

// or newer Fetch
fetch(url)
  .then(resp => resp.blob())
  .then(blob => fileReader.readAsArrayBuffer(blob));

但在您的情况下，您需要的是此文件的 ArrayBuffer 表示。这两个 APIs 还提供了一个选项来直接请求文件作为 ArrayBuffer，使 FileReader 无用：

// traditional XHR
var xhr = new XMLHttpRequest();
xhr.open('get', url);
xhr.responseType = 'arraybuffer'; // directly as an ArrayBuffer
xhr.onload = function(e){
  visualizer.start(this.response); // no need to use a FileReader anymore
}
xhr.send();

// or newer Fetch
fetch(url)
  .then(resp => resp.arrayBuffer()
  .then(buf => visualizer.start(buf));

FileReader readAsArrayBuffer() 与本地 mp3 文件

FileReader readAsArrayBuffer() with a local mp3 file

javascript

filereader

web

web-audio-api