实现带Reverb混响效果的ToneJS Player时连接报错如何解决

问题根源 #

• Tone.Reverb 初始化后需要异步生成冲激响应才能完成节点初始化，同步调用toDestination()、连接Player时Reverb节点还未完成内部加载，相当于目标连接节点不存在，因此抛出对应错误。
• 移除Reverb后逻辑正常，是因为Player的加载状态会被Tone.loaded()捕获，但Reverb的就绪状态不会被该方法识别。

修复后的可运行代码 #

async playTone(){
    const decay = this.reverb / 100;
    // 先等待Reverb完成异步初始化
    const reverb = await new Tone.Reverb(decay).toDestination().generate();
    const player = new Tone.Player(this.songUrl).connect(reverb);
    await Tone.loaded();
    player.start();
}

优化建议 #

• 不要每次调用播放方法都新建Reverb和Player实例，建议在页面/组件初始化阶段提前完成两个实例的初始化，播放时直接调用player.start()，避免重复创建音频节点造成内存泄漏。
• 如果使用自定义冲激响应文件实现特殊混响效果，把generate()调用替换为Tone.Reverb.fromUrl(IR文件地址)的异步加载逻辑即可。

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