浏览器单会话内是否限制decodeAudioData的调用次数？

我开发了一个基于React Next的Web应用，使用Web Audio API播放歌曲。发现浏览大量歌曲后，应用无法加载新歌曲：

• 在Chrome中会报错：Failed to execute 'decodeAudioData' on 'BaseAudioContext': Unable to decode audio data，仅在刷新页面（有时需2-3次）后才能重新加载歌曲；查看Chrome DevTools内存面板的"Total JS heap size"未发现内存泄漏。
• 在Safari中页面会自动刷新。

为排除代码问题，我制作了一个极简示例并复现该问题，调用约250次后出现解码错误。即使在每次循环后添加延迟也无济于事。看起来浏览器可能存在相关限制，但未找到官方文档说明，请问这是什么原因？

复现代码 #

export const test = async () => {
  const audioContext = new AudioContext();
  const blob = (
    await axios.get("./url-to-some-song.wav", {
      responseType: "blob",
    })
  ).data;

  for (let i = 0; i < 300; i++) {
    const arrayBuffer = await blob.arrayBuffer();
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
  }
};

这是浏览器对Web Audio API的音频解码资源限制导致的，不同浏览器的具体阈值不同，核心逻辑如下：

• 浏览器的音频解码线程、硬件加速资源池是有限的，高频调用decodeAudioData会快速耗尽这些资源。即便JS堆内存里没有保留AudioBuffer的引用，底层绑定的解码会话、硬件资源可能无法被及时回收。
• Chrome的解码错误是资源耗尽后的直接提示，Safari的自动刷新则是浏览器在资源过载时的自我保护机制。

解决思路 #

1. 避免重复解码：对同一音频文件，缓存已解码完成的AudioBuffer，不要反复调用decodeAudioData——你的示例里循环解码同一个blob就是典型的无效重复操作。
2. 控制解码并发数：即便是不同歌曲，也不要同时发起大量解码请求，用队列限制并发量（比如一次只解码2-3个），给浏览器留出资源回收的时间。
3. 适时重建AudioContext：长期复用同一个AudioContext可能积累未释放的底层资源，可在批量解码完成后销毁旧的AudioContext并重建（注意：重建需要用户交互触发，符合浏览器的自动播放政策）。

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