使用本地mp3文件的FileReader readAsArrayBuffer()方法

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文件也能工作呢？

如果您有任何建议，谢谢您！

- Surz

---

你如何定义本地？是指在你的服务器上吗？所以，这里的 file 是一个字符串，而不是 File 或 Blob 对象... 如果该字符串代表指向文件的有效 URI，则可以执行 fetch(file).then(r=>r.blob()).then(blob=>fileReader.readAsArrayBuffer(blob))。 - Kaiido

是的，在我的服务器上，现在正在本地运行它。 - Surz

所以，是的，首先获取数据，但实际上，直接获取它作为arrayBuffer，甚至不要通过fileReader。 （当我回到真正的键盘时，我可能会写一个答案） - Kaiido

太棒了！所以，为了让我明白正在发生的事情 - 你获取了文件字符串，将其转换为 Blob，然后以数组缓冲区的形式读取它？你说的“甚至不通过 fileReader”是什么意思？谢谢！！ - Surz

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));

- Kaiido

---

这段代码应该放在 fileReader.onload = function (e) 的下面吗？ 我正在尝试弄清楚 fileResult 等于什么。 - Surz

其实 - 明白了。visualizer.start(buf) 可以工作 - 听起来对吗？ - Surz