求助：使用Tone.js、React构建鼓机音序器时无法播放声音问题

• 激活音频上下文
  浏览器要求必须通过用户交互（比如点击播放按钮）才能启动音频上下文，在播放按钮的点击逻辑里加上Tone.start()：

  const handlePlay = () => {
    Tone.start();
    // 原有播放逻辑
  };
  

• 确认音源加载与配置
  如果用Sampler，先确保音频文件路径正确，且资源加载完成后再执行播放逻辑：

  Tone.loaded().then(() => {
    console.log("音频资源加载完成");
    // 这里开启播放或激活播放按钮
  });
  

  用Synth的话，检查振荡器、包络等参数配置是否合理：

  const synth = new Tone.Synth({
    oscillator: { type: "square" },
    envelope: { attack: 0.01, release: 0.1 }
  }).toDestination();
  

• 检查声音触发逻辑
  遍历网格时，要在Tone.js的调度器内触发声音，保证时间轴同步：

  Tone.Transport.scheduleRepeat((time) => {
    grid.forEach((row, rowIndex) => {
      row.forEach((cell) => {
        if (cell.active) {
          // 按行索引触发对应声音
          sampler.triggerAttackRelease(`drum${rowIndex}`, "8n", time);
        }
      });
    });
  }, "8n");
  

• 确保音源连接到输出
  所有Sampler/Synth必须调用.toDestination()，否则声音无法输出：

  const sampler = new Tone.Sampler({
    "kick": "./samples/kick.wav",
    "snare": "./samples/snare.wav"
  }).toDestination();
  

• 调试音频节点
  打开浏览器开发者工具的Audio面板，查看是否有音频节点创建、音频事件触发。同时在声音触发代码处加console.log，确认逻辑是否执行到。

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