Web Audio API在Chrome/Safari发声但Firefox无声问题排查

我基于Web Audio API开发的音频功能，在Chrome和Safari中可正常播放音频，但在Firefox浏览器中仅出现无声状态且无任何报错信息，无法定位问题根源。

实现代码如下：

const lowpassFilterNode = audioContext.createBiquadFilter()
lowpassFilterNode.type = "lowpass"
lowpassFilterNode.frequency.value = lowpassCutoff
lowpassFilterNode.Q.value = 5
const gainNode = audioContext.createGain()
gainNode.gain.value = volume
await audioContext.audioWorklet.addModule("./soundtouch.js")
const source = createScheduledSoundTouchNode(audioContext, audioBuffer)
source.parameters.get("rate").value = audioSpeed
source.parameters.get("pitch").value = pitchCorrect
source.loop = true
await functions.timeout(200)
source.connect(gainNode)
gainNode.connect(audioContext.destination)
source.start(0, offset)

怀疑问题出在使用的SoundTouch相关AudioWorklet库，但未在库代码中发现明显错误，以下是具体排查思路：

基础环境与兼容性排查 #

• 检查Firefox版本：确认使用的Firefox版本为72及以上（AudioWorklet最低支持版本），直接升级到最新稳定版测试。
• 验证AudioContext状态：在Firefox控制台打印audioContext.state，确保状态为running——Firefox对AudioContext自动激活限制严格，必须在用户交互（点击/触摸等）事件回调内初始化或调用audioContext.resume()。
• 确认触发时机：确保音频播放逻辑是在用户交互（如按钮点击）的回调内执行，避免Firefox拦截自动播放。

AudioWorklet模块加载与基础验证 #

• 替换节点测试：暂时移除SoundTouch的AudioWorklet，改用原生AudioBufferSourceNode连接后续节点播放，若Firefox能正常出声，可锁定问题在SoundTouch的AudioWorklet实现中。
• 捕获加载错误：给addModule添加catch逻辑，排查是否有隐藏的加载失败：

  await audioContext.audioWorklet.addModule("./soundtouch.js").catch(err => console.error(err))
  

• 查看Worklet日志：在SoundTouch的AudioWorklet处理器代码中添加console.log，比如在process方法内打印输入输出数据，Firefox控制台需勾选「Show Content Messages」才能看到Worklet的日志输出，确认是否有音频数据流入流出。

SoundTouch库的Firefox适配排查 #

• 参数范围验证：检查rate、pitch参数的取值是否在Firefox允许的范围内，对比Chrome的参数取值，确认库中参数定义是否符合Firefox的AudioWorklet规范。
• 关闭循环测试：暂时注释source.loop = true，测试非循环状态下是否能出声，排查Firefox对AudioWorklet节点循环功能的兼容问题。
• 缓冲区检查：确认audioBuffer的采样率、通道数是否被Firefox支持，offset参数是否未超出音频缓冲区时长范围。
• 移除延迟测试：去掉await functions.timeout(200)，直接连接节点并启动，排查延迟是否导致Firefox音频链路异常。

音频链路节点排查 #

• 增益节点检查：在控制台打印gainNode.gain.value，确认volume值不为0，可临时设置为1.0测试。
• 跳过滤波器测试：暂时移除lowpassFilterNode，直接将source连接到gainNode，排查滤波器在Firefox的兼容性问题。
• 信号可视化：插入AnalyserNode到链路中，在控制台获取数据确认是否有音频信号通过：

  const analyser = audioContext.createAnalyser()
  gainNode.connect(analyser)
  // 在控制台执行以下代码查看信号
  const data = new Uint8Array(analyser.frequencyBinCount)
  analyser.getByteTimeDomainData(data)
  console.log(data)
  

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