Tone.jsSequence进度监控技巧

Tone.js 的 Sequence 并非传统意义上的实时进度计时器，其 `progress` 属性仅在启用循环（`loop: true`）时有效，单次播放中恒为 0；真正可靠的状态判断应依赖 `state` 快照与内置的 `ended` 事件——后者在序列自然遍历完毕时精准触发，配合显式指定步长时间和可选的索引计数器，即可实现稳定、可预测的播放完成响应与 UI 同步，彻底避开轮询陷阱，回归 Tone.js 事件驱动的设计本质。

Tone.js 的 `Sequence` 对象虽提供 `state` 和 `progress` 属性，但 `progress` 仅在启用循环（`loop: true`）时返回归一化进度值（0–1），非循环序列中恒为 0；`state` 可实时反映 `"started"` / `"stopped"` 状态，需结合事件监听实现精准完成判定。

在 Tone.js 中，Tone.Sequence 并非一个“持续更新进度”的实时计时器，而是一个基于调度器（Tone.Transport）触发回调的节拍驱动工具。其 state 属性是可信赖的状态快照（如 "started"、"stopped"），但 progress 属性具有明确使用前提：仅当 loop: true 时，它才随当前循环位置返回 [0, 1) 区间的归一化值；若未启用循环（默认行为），progress 始终为 0 —— 这正是你观察到“始终为零”的根本原因。

因此，若目标是检测单次序列播放完成并触发事件，不应依赖 progress，而应采用以下推荐方案：

✅ 正确做法：使用 ended 事件监听

Tone.Sequence 继承自 Tone.Event, 内置 ended 事件，在序列自然结束（即遍历完所有步长且未循环）时精确触发：

const synth = new Tone.FMSynth().toDestination();
const notesArray = [
  { note: "B2", duration: "16n" },
  { note: "B3", duration: "16n" },
  { note: "A2", duration: "16n" },
  { note: "G2", duration: "16n" },
  { note: "B4", duration: "16n" }
];

const seq = new Tone.Sequence(
  (time, note) => {
    synth.triggerAttackRelease(note.note, note.duration, time, 0.1);
  },
  notesArray,
  "16n" // 显式指定步长时间（推荐）
).start(0);

// ✅ 关键：监听 ended 事件实现完成回调
seq.onended = () => {
  console.log("✅ Sequence completed!");
  // 在此处触发你的业务逻辑：UI 更新、启动下一环节、播放音效等
};

// 可选：监听 state 变化（用于调试或状态同步）
seq.onstatechange = () => {
  console.log("Current state:", seq.state); // "started" 或 "stopped"
};

⚠️ 注意事项

• 务必显式传入步长时间（如 "16n"）：若省略，Sequence 可能因内部推导不一致导致调度异常；
• 避免在回调中直接读取 seq.progress 判定完成：非循环场景下该值无意义；
• state === "stopped" 不等于“已播放完毕”：它可能由手动调用 .stop() 引起，无法区分主动停止与自然结束；
• 如需自定义进度反馈（如 UI 进度条），建议自行维护索引计数器：

  let stepIndex = 0;
  const seq = new Tone.Sequence((time, note) => {
    synth.triggerAttackRelease(note.note, note.duration, time, 0.1);
    console.log(`Playing step ${++stepIndex}/${notesArray.length}`);
  }, notesArray, "16n");

综上，Tone.Sequence 的设计哲学是“事件驱动”而非“轮询查询”。拥抱 onended 事件，配合清晰的 state 监听，才是实现可靠播放控制与完成响应的专业实践。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。