FileReader readAsArrayBuffer() 与本地 mp3 文件

Question

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

我正在尝试使用 Web Audio 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);

我收到错误：“无法在 'FileReader' 上执行 'readAsArrayBuffer'：参数 1 不是 '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 表示。这两个 API 还提供了直接以 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));