Web Audio API 播放音频时为什么没声音？

设计师世祥提问于 2026-03-14 12:15:18 阅读 2

交互

我在 React 里用 Web Audio API 加载并播放一个本地音频文件，控制台也没报错，但就是听不到声音，到底哪里出问题了？

我试过检查 audioContext 的状态是不是 suspended，也确认了 fetch 返回的数据没问题，但音频就是不响。是不是解码或者播放流程哪里漏了？

const playAudio = async () => {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const response = await fetch('/audio/test.mp3');
  const arrayBuffer = await response.arrayBuffer();
  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(audioContext.destination);
  source.start(0);
};

我来解答赞 0 收藏

反馈

1 条解答

Good“翌菡 Lv1

每次调用都创建新的 AudioContext 是个大坑。浏览器会挂起新创建的 context，而且你也没调用 resume()。

改成单例模式，在播放前确保 context 处于 running 状态：

let audioContext = null;



const playAudio = async () => {

  if (!audioContext) {

    audioContext = new (window.AudioContext || window.webkitAudioContext)();

  }

  

  // 关键：浏览器需要用户交互才能恢复 AudioContext

  if (audioContext.state === 'suspended') {

    await audioContext.resume();

  }

  

  const response = await fetch('/audio/test.mp3');

  const arrayBuffer = await response.arrayBuffer();

  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

  const source = audioContext.createBufferSource();

  source.buffer = audioBuffer;

  source.connect(audioContext.destination);

  source.start(0);

};

如果你是通过某个按钮触发的，确保用户点完按钮后 context 能顺利 resume。很多现代浏览器默认禁止自动播放音频，必须要有用户交互才能让 AudioContext 变成 running 状态。

2026-03-14 12:28