如何替换<input type="file">实现本地音频转ArrayBuffer无需重复加载？

我有如下HTML代码：

<script type="text/javascript"> window.onload = function() { var volumeBars = { mono: document.getElementById("monoFill") }; document.getElementById("open-file").onchange = function(evt) { var file = evt.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { playSound(e.target.result); console.log(e.target.result); } reader.readAsArrayBuffer(file); } var context = new AudioContext(); function playSound(arraybuffer) { context.close(); context = new AudioContext(); var source = context.createBufferSource(); context.decodeAudioData(arraybuffer, function(buffer) { source.buffer = buffer; }); //= console.log(arraybuffer) var analyser = context.createAnalyser(); analyser.smoothingTimeConstant = .9; analyser.fftSize = 1024; jsNode = context.createScriptProcessor(2048, 1, 1); jsNode.onaudioprocess = function() { var array = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(array); volumeBars.mono.style.height = Math.average(array) * 2 + "px"; volumeBars.mono.innerHTML = Math.floor(Math.average(array)); console.log(volumeBars.mono.innerHTML); } source.connect(analyser); source.connect(context.destination); jsNode.connect(context.destination); analyser.connect(jsNode); source.start(); } Math.average = function(arguments) { var numbers; if (arguments[0] instanceof Array) { numbers = arguments[0]; } else if (typeof arguments[0] == "number") { numbers = arguments; } var sum = 0; var average = 0; for (var i = 0; i < numbers.length; i++) { sum += numbers[i]; } average = sum / numbers.length; return average; } } </script> <div id="container"> <div class="bar" id="mono"> <div class="fill" id="monoFill"></div> </div> </div> <input type="file" id="open-file" accept="audio/*">

我遇到的问题是：希望替换代码中的

var file = evt.target.files[0];

这部分，改用无需每次手动加载的本地文件，但找不到将该文件编码为ArrayBuffer的方法，恳请各位提供技术帮助。

这里有几种实用的方法帮你实现自动加载本地音频，不用每次手动选择文件：

方法1：用Fetch API直接加载服务器/本地路径的音频文件 #

如果你的音频文件和HTML页面在同一目录（或服务器上），这是最简洁的方案。我们可以用fetch API请求音频文件，直接转换成ArrayBuffer，页面加载后自动触发播放逻辑。

修改步骤如下：

1. 删掉页面里的<input type="file" id="open-file" accept="audio/*">元素
2. 替换原有的文件选择监听逻辑，改成自动请求音频文件：

window.onload = function() {
  var volumeBars = { mono: document.getElementById("monoFill") };
  var context = new AudioContext();

  // 替换成你的音频文件路径（比如同目录下的demo.mp3）
  fetch('demo.mp3')
    .then(response => {
      if (!response.ok) throw new Error('音频加载失败');
      return response.arrayBuffer();
    })
    .then(arrayBuffer => playSound(arrayBuffer))
    .catch(err => console.error('出错了:', err));

  // 以下是你原有的playSound函数，保持不变
  function playSound(arraybuffer) {
    context.close();
    context = new AudioContext();
    var source = context.createBufferSource();
    context.decodeAudioData(arraybuffer, function(buffer) {
      source.buffer = buffer;
    });
    var analyser = context.createAnalyser();
    analyser.smoothingTimeConstant = .9;
    analyser.fftSize = 1024;
    jsNode = context.createScriptProcessor(2048, 1, 1);
    jsNode.onaudioprocess = function() {
      var array = new Uint8Array(analyser.frequencyBinCount);
      analyser.getByteFrequencyData(array);
      volumeBars.mono.style.height = Math.average(array) * 2 + "px";
      volumeBars.mono.innerHTML = Math.floor(Math.average(array));
      console.log(volumeBars.mono.innerHTML);
    }
    source.connect(analyser);
    source.connect(context.destination);
    jsNode.connect(context.destination);
    analyser.connect(jsNode);
    source.start();
  }

  // 原有的Math.average函数也保持不变
  Math.average = function(arguments) {
    var numbers;
    if (arguments[0] instanceof Array) {
      numbers = arguments[0];
    } else if (typeof arguments[0] == "number") {
      numbers = arguments;
    }
    var sum = 0;
    var average = 0;
    for (var i = 0; i < numbers.length; i++) {
      sum += numbers[i];
    }
    average = sum / numbers.length;
    return average;
  }
}

⚠️ 注意：如果是本地直接打开HTML文件，可能会遇到CORS跨域限制。建议用本地服务器运行，比如打开终端输入python -m http.server（Python3），然后访问http://localhost:8000来加载页面。

方法2：将音频编码为Base64嵌入代码中 #

如果不想依赖外部音频文件，可以把音频转换成Base64字符串，直接嵌入到代码里，然后解码成ArrayBuffer。

操作步骤：

1. 找一个在线的音频转Base64工具，把你的音频文件转换成Base64字符串（记得去掉开头的data:audio/xxx;base64,前缀）
2. 在代码中添加解码函数，自动转换并播放：

window.onload = function() {
  var volumeBars = { mono: document.getElementById("monoFill") };
  var context = new AudioContext();

  // 替换成你的音频Base64字符串
  const audioBase64 = '这里放你的音频Base64内容';
  // 解码Base64为ArrayBuffer
  const arrayBuffer = base64ToArrayBuffer(audioBase64);
  // 调用播放函数
  playSound(arrayBuffer);

  // Base64转ArrayBuffer的辅助函数
  function base64ToArrayBuffer(base64) {
    const binaryString = window.atob(base64);
    const bytes = new Uint8Array(binaryString.length);
    for (let i = 0; i < binaryString.length; i++) {
      bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes.buffer;
  }

  // 原有的playSound和Math.average函数保持不变
  function playSound(arraybuffer) {
    // ... 你的原有代码 ...
  }

  Math.average = function(arguments) {
    // ... 你的原有代码 ...
  }
}

这种方法适合小型音频文件，缺点是Base64会让代码体积变大，不适合大文件。

方法3：本地开发专用（不推荐线上） #

如果是本地开发想直接读取磁盘里的音频文件，浏览器出于安全限制不允许直接访问，除非用户手动选择。如果一定要绕开，可以用Node.js写个小脚本预读取文件内容，转换成ArrayBuffer后注入到页面，但这种方法只适合开发场景，线上环境无法使用。

总结 #

推荐优先用方法1，这是生产环境最常用的方案；如果需要无外部依赖的离线方案，选方法2。

内容的提问来源于stack exchange，提问作者William Stinson