如何在Next.js v12（Pages路由）的Tone.js中停止所有音频并重置时间线时钟？

Tone.js没有提供单一命令直接完成“停止所有音频组件+重置时间线时钟”的操作，但可以通过组合几个核心API实现需求，适配Next.js v12 Pages路由的动态导入场景：

核心实现步骤 #

• 停止并重置时间线传输器：
  • Tone.Transport.stop()：立即停止时间线调度
  • Tone.Transport.cancel()：取消所有已调度的未来事件
  • Tone.Transport.position = 0：将时间线位置重置为0
• 终止所有活跃音频源：
  通过音频上下文获取所有活跃的音频源（振荡器、播放器等）并逐一停止：

  Tone.context.activeSources.forEach(source => {
    if (source.stop) source.stop();
  });
  

• 同步重置音频上下文时钟：
  确保音频上下文的时间与Tone.js时间线对齐：

  await Tone.context.resume();
  Tone.context.currentTime = 0;
  

完整重置函数示例 #

const resetToneAudio = async () => {
  // 停止并重置Transport
  Tone.Transport.stop();
  Tone.Transport.cancel();
  Tone.Transport.position = 0;

  // 停止所有活跃音频源
  Tone.context.activeSources.forEach(source => {
    if (typeof source.stop === 'function') {
      source.stop();
    }
  });

  // 重置音频上下文时间
  await Tone.context.resume();
  Tone.context.currentTime = 0;
};

Next.js动态导入适配注意事项 #

在Pages路由中动态导入Tone.js时，需关闭SSR确保仅在客户端加载：

import dynamic from 'next/dynamic';

const Tone = dynamic(() => import('tone'), {
  ssr: false,
  loading: () => null,
});

调用重置函数前，要确保Tone已完成初始化（可在useEffect中执行初始化逻辑）。

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