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

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

交互

我在 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);
};

我来解答赞 8 收藏

反馈

2 条解答

西门艺涵 Lv1

看起来问题出在音频上下文的状态管理上。通常我们需要确保 AudioContext 在播放前是运行状态，而不是 suspended。

一般这样处理：在调用 start 之前，先检查并激活 AudioContext。如果它处于 suspended 状态，需要通过用户交互来解锁。这里给你改一下代码：

const playAudio = async () => {

  const 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(audioContext.currentTime);

};

记得把播放逻辑绑定到某个用户交互事件里，比如按钮点击，不然浏览器可能会阻止自动播放。这东西调试起来真让人头疼，不过这样修改应该能解决问题了。

2026-03-28 01:01

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