javascript - トランスポートの再生中に ToneJS イベントをスケジュールする

Question

Tone JS アプリで 4 つのノートを再生していますが、トランスポートが現在再生されている間に 3 番目のノートを別のノートに変更したいと考えています。これが私のコードです：

JS:

import { Transport, start, Sampler } from "tone";

const notesToPlay = [
  {
    timing: 0.25,
    sameAsLast: false,
    duration: 0.1,
    velocity: 1
  },
  {
    timing: 0.5,
    sameAsLast: true,
    duration: 0.1,
    velocity: 1
  },
  {
    timing: 0.75,
    sameAsLast: false,
    duration: 0.1,
    velocity: 1
  },
  {
    timing: 1,
    sameAsLast: false,
    duration: 0.2,
    velocity: 1
  }
];

var eventIds = [];

(function () {
  function playSynth() {
    Transport.start();
    start();
  }

  const sampler = new Sampler({
    urls: {
      A1: "A1.mp3",
      A2: "A2.mp3"
    },
    baseUrl: "https://tonejs.github.io/audio/casio/",
    onload: () => {
      loadNotes();
    }
  }).toDestination();

  function loadNotes() {
    notesToPlay.forEach((n) => {
      const eventId = Transport.scheduleRepeat((time) => {
        sampler.triggerAttackRelease(
          ["A1"],
          n.duration,
          n.timing + time,
          n.velocity
        );
      }, 4);

      eventIds.push(eventId);
    });
  }

  document.getElementById("play").addEventListener("click", function () {
    playSynth();
  });

  document.getElementById("stop").addEventListener("click", function () {
    Transport.stop();
  });

  document.getElementById("replace").addEventListener("click", function () {
    const arrayIdxToReplace = 2;
    Transport.clear(eventIds[arrayIdxToReplace]);
    const note = notesToPlay[arrayIdxToReplace];
    Transport.scheduleRepeat((time) => {
      sampler.triggerAttackRelease(
        ["D1"],
        note.duration,
        note.timing + time,
        note.velocity
      );
    }, 4);
  });
})();

HTML:

<div id="app">
  <button id="play">play me</button>
  <button id="stop">stop</button>
  <button id="replace">Replace 3rd note</button>
</div>

3 番目のメモの置換ボタンをクリックすると、古いイベントが削除されますが、新しいイベントをスケジュールすると、古い 3 番目のメモの場所と同期しなくなります。

これを回避する方法は、トランスポートを停止し、クリックして 3 番目の音符を置き換え、もう一度再生をクリックすることですが、トランスポートがまだ再生されている間にこれを実行できるようにしたいと考えています。どこで間違ったのですか？

問題をデモするフィドルは次のとおりです。

https://codesandbox.io/s/tonejs-forked-fxhzm?file=/src/index.js:0-1643