JavaScript - 如何将音频文件加载到 readAsArrayBuffer 中？答案

【问题标题】：JavaScript - How to load an audio file into readAsArrayBuffer?JavaScript - 如何将音频文件加载到 readAsArrayBuffer 中？
【发布时间】：2017-10-25 21:42:21
【问题描述】：

我在加载音频文件然后将其放入 readAsArrayBuffer 时遇到问题。我不希望用户选择一个文件，我只是希望它像这样在本地加载一个：

let file = new File('../music/song.mp3');
let reader = new FileReader();

reader.onload = function(e) {
    playSound(e.target.result);
}
reader.readAsArrayBuffer(file);

当我执行上述操作时，我收到以下错误：

未捕获的类型错误：无法构造“文件”：需要 2 个参数，但只有 1 个存在。

所以我试试这个：

let file = new File([''], '../music/song.mp3');

然后产生此错误：

未捕获（承诺）DOMException：无法解码音频数据

它加载的大小为 0，我相信这就是它产生此错误的原因。

当我让用户选择要加载的文件时，一切正常：

document.getElementById('open-file').onchange = function(evt) {
    let file = evt.target.files[0];

有谁知道如何解决这个问题？

【问题讨论】：

您无法在没有用户交互的情况下读取本地文件系统文件，否则将存在安全风险。另见documentation for File()，它显示了它需要什么参数
您将需要获取此文件，文件构造函数不处理它并且不接受 URI 作为输入。所以你似乎想要的是fetch('../music/song.mp3').then(r=>r.arrayBuffer()).then(buf=>audioContext.decodeAudioData(buf).then(enjoyTheAudioBuffer);

标签： javascript file audio arraybuffer

【解决方案1】：

正如 Patrick Evans 所说，由于存在安全风险，这根本不可能。很遗憾，您可以使用 HTML5 轻松播放音频，但您无法加载音频文件并将它们作为数组缓冲区读取。

【讨论】：