如何实例化MP3音频文件对象以替代现有文件读取代码？

我原本通过文件选择器获取文件并使用FileReader读取的代码可以正常运行：

<input type="file" id="my_file">

<script>
var file = document.getElementById('my_file').files[0],
reader = new FileReader();
reader.onload = function(e) {
//...
}
reader.readAsArrayBuffer(file);
</script>

但我希望直接实例化对象处理本地MP3音频文件，尝试以下代码后无法正常运行：

<script>
// 示例：尝试直接传入文件对象给readAsArrayBuffer()
var file = new File("./fichier.mp3");       // 无法工作

reader = new FileReader();
reader.onload = function(e) {
//...
}
reader.readAsArrayBuffer(file);
</script>

求可行解决方案。

解决方案 #

1. 从服务器加载音频（通用前端方案） #

浏览器出于安全限制，禁止前端直接通过本地路径（如./fichier.mp3）访问文件系统，所以new File()传入路径的写法不成立。你可以用fetch API从服务器请求音频文件，直接获取ArrayBuffer：

fetch('./fichier.mp3')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    // 在此处理获取到的音频ArrayBuffer
    console.log('音频数据已加载:', buffer);
    // 若需要转为File对象（可选）
    const audioFile = new File([buffer], 'fichier.mp3', { type: 'audio/mpeg' });
    // 后续可使用FileReader处理该File对象，或直接使用buffer
  })
  .catch(err => {
    console.error('音频加载失败:', err);
  });

2. 正确使用File构造函数 #

File构造函数的第一个参数必须是二进制数据的数组（比如Blob、ArrayBuffer），而非文件路径。如果已有音频的二进制数据，可这样创建File对象：

// 先通过fetch获取Blob格式的音频数据
fetch('./fichier.mp3')
  .then(res => res.blob())
  .then(blob => {
    const audioFile = new File([blob], 'fichier.mp3', { type: 'audio/mpeg' });
    const reader = new FileReader();
    reader.onload = function(e) {
      const buffer = e.target.result;
      // 处理音频数据
    };
    reader.readAsArrayBuffer(audioFile);
  });

3. 本地文件访问（特殊场景） #

如果是浏览器扩展开发，或通过file://协议打开本地HTML（不推荐，存在安全限制），需通过浏览器提供的特定API获取文件权限，仍无法直接通过硬编码路径读取文件。

内容的提问来源于stack exchange，提问作者Chris Toulon