上传音频文件后使用Web Audio API播放失败的技术求助

问题根源 #

1. 浏览器自动播放政策限制：现代浏览器要求AudioContext必须在用户交互（如选择文件、点击按钮）后才能激活，直接初始化会处于暂停状态，无法播放音频。
2. 未监听文件选择事件：原代码直接读取files[0]，但页面加载时用户还未选择文件，此时该值为undefined，后续逻辑全部失效。
3. 缺少错误处理：没有捕获解码或读取文件时的异常，无法定位具体问题。

修正后的完整代码 #

HTML

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

JavaScript

// 兼容不同浏览器的AudioContext
const AudioContext = window.AudioContext || window.webkitAudioContext;
let audioContext;

// 监听文件选择事件，确保用户选完文件再执行逻辑
document.getElementById('input').addEventListener('change', async (e) => {
  const selectedFile = e.target.files[0];
  if (!selectedFile) return;

  // 初始化并激活AudioContext
  if (!audioContext) {
    audioContext = new AudioContext();
    // 处理浏览器可能的暂停状态
    if (audioContext.state === 'suspended') {
      await audioContext.resume();
    }
  }

  try {
    // 读取上传的音频文件为ArrayBuffer
    const arrayBuffer = await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = reject;
      reader.readAsArrayBuffer(selectedFile);
    });

    // 解码音频数据
    const sampleBuffer = await audioContext.decodeAudioData(arrayBuffer);

    // 创建音频源并播放
    const sampleSource = audioContext.createBufferSource();
    sampleSource.buffer = sampleBuffer;
    sampleSource.connect(audioContext.destination);
    sampleSource.start();
  } catch (error) {
    console.error('音频播放失败:', error);
  }
});

关键修正说明 #

• 将音频处理逻辑绑定到input的change事件，确保用户选择文件后才执行。
• 延迟初始化AudioContext到用户交互阶段，符合浏览器的自动播放规则，同时主动恢复可能的暂停状态。
• 使用FileReader直接读取File对象（也可继续用fetch，但FileReader更贴合场景），增加异常捕获便于调试。
• 兼容了不同浏览器的AudioContext前缀。

内容的提问来源于stack exchange，提问作者Arlo Erwin