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是一个 String ，最好将其重命名为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));