Vue3+TypeScript中Tone.js Sampler调用triggerAttackRelease报InvalidStateError求助

DevOps 小满

2026-6-14

问题：Vue3+TypeScript中Tone.js Sampler触发InvalidStateError无法播放

我在Vue3+TypeScript应用里用Tone.js的Sampler组件制作小型beatbox，通过将整数序列转换为二进制实现复音鼓点节奏。MIDI文件下载功能正常，说明音符和力度序列无误，MP3样本也已正确加载，但调用playStep方法中的triggerAttackRelease时始终触发InvalidStateError。此前用类似逻辑基于振荡器制作的音序器可正常运行，此beatbox却无法实时播放，求调试方案。

调试思路与解决方案

激活音频上下文：浏览器要求音频上下文必须通过用户交互（如点击按钮）激活，直接初始化会处于suspended状态。务必将播放启动逻辑绑定到用户触发事件中，并在启动前调用Tone.start()：
```
const startPlayback = async () => {
  await Tone.start();
  // 启动音序循环逻辑
};
```

确保Sampler完全加载：显式等待Sampler加载完成后再执行播放操作，避免样本未就绪时触发播放：

const initSampler = async () => {
  const sampler = new Tone.Sampler({
    // 你的样本路径映射
  });
  await sampler.load();
  sampler.connect(Tone.Destination);
  return sampler;
};

校验triggerAttackRelease参数：确认传入的音符（字符串格式，如"C4"）、时长（合法时间值，如"8n"）、力度（0-1区间数值）参数符合Tone.js要求，避免参数格式错误导致异常。
使用Tone.js调度器处理播放：避免用自定义定时器触发播放，改用Tone.Transport.scheduleRepeat在音频上下文时间轴上调度播放操作，确保时序正确：
```
Tone.Transport.scheduleRepeat((time) => {
  // 在指定时间点触发采样播放
  sampler.triggerAttackRelease(note, duration, time, velocity);
}, "8n");
```
查看详细错误信息：浏览器控制台的InvalidStateError通常附带具体原因（如"无法在暂停的音频上下文上调用方法"），根据提示精准定位问题。