Tone.js + React: Why is this simple repeating synth sequence not working as I expect?

This is a play/stop button that, when pressed, plays a given number of random notes, waits, and then plays another sequence of random notes. It continues until you press stop. You can also select how many notes are in the sequence. But it's being unexpected in a few ways. Most obviously: Sometimes the pause between sequences is really long (10-20 seconds instead of a few seconds) When you adjust the counter, it doesn't seem to follow what you selected. Am I using Tone.js properly? I'm not too familiar with AudioContexts, transforms, and the different Tone.js methods, but I seem to have it working. Here is a codesandbox, but let me know if I can improve this question. https://codesandbox.io/p/sandbox/keen-ellis-y79svm

Tone.js + React: Why is this simple repeating synth sequence not working as I expect?

This is a play/stop button that, when pressed, plays a given number of random notes, waits, and then plays another sequence of random notes. It continues until you press stop. You can also select how many notes are in the sequence.

But it's being unexpected in a few ways. Most obviously:

  • Sometimes the pause between sequences is really long (10-20 seconds instead of a few seconds)
  • When you adjust the counter, it doesn't seem to follow what you selected.

Am I using Tone.js properly? I'm not too familiar with AudioContexts, transforms, and the different Tone.js methods, but I seem to have it working.

Here is a codesandbox, but let me know if I can improve this question.

https://codesandbox.io/p/sandbox/keen-ellis-y79svm