Howler.js使用Tone.PitchShift修正播放速率音高偏移时连接报错求助

问题根因 #

报错是因为Howler.masterGain是原生Web Audio API的AudioNode实例，只能连接同类型的原生音频节点，而Tone.PitchShift是Tone.js封装的效果器对象，原生connect方法无法识别该封装类型，因此触发参数匹配失败的错误。

正确可运行代码 #

// 提前校验Howler上下文已初始化，避免时序问题
if (Howler.ctx && Howler.masterGain) {
  // 全局同步Tone的音频上下文为Howler使用的上下文
  Tone.setContext(Howler.ctx);
  // 初始化音高修正效果器，参数为需要调整的半音数，反向抵消速率调整带来的音高偏移
  const pShift = new Tone.PitchShift(3);
  // 断开Howler默认的输出链路，避免原始音频直接输出导致两路音叠加
  Howler.masterGain.disconnect(Howler.ctx.destination);
  // 原生GainNode连接到Tone效果器暴露的原生输入节点
  Howler.masterGain.connect(pShift.input);
  // 效果器输出连接到系统音频输出
  pShift.connect(Howler.ctx.destination);

  // 调试日志
  console.log(Howler.masterGain)
  console.log(pShift);
}

额外排查建议 #

• 半音修正值可通过公式自动计算，不需要硬编码：修正半音 = -12 * Math.log2(你的播放速率值)，比如播放速率设为2倍时音高升高12个半音，填修正值-12即可还原原音高
• 如果用的是Tone.js v14及以上版本，建议用更规范的构造写法：new Tone.PitchShift({ pitch: 3 })
• 如果存在音频失真问题，可以适当调大PitchShift的windowSize参数， trade-off是延迟变大但音高修正效果更平滑

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