Every play button press plays the notes louder

[philip-nguyen]

Hi, I'm new to using Tone JS, and I have a sequencer where it plays the notes as 16th notes and repeats the sequence until you press the play button again. However, when I press the play button after the second press (which stops the playback), it sounds louder as if there is an identical set of notes being played on top of what is currently in the sequencer UI. With each play back afterward it get louder and louder.

Am I just not using the API correctly? Is there some way I can clear the Sequencer object or synth so that it plays correctly each time?

To Reproduce

Here is a sandbox that is reproduces the error I'm getting; every time the notes playback, it sounds like the notes are stacked with an identical set of notes. https://codesandbox.io/s/sequencerstacksnotes-zng0z?file=/src/App.js

Expected behavior I want the notes to play as is, with the volume not increasing/extra notes not stacking.

What I've tried I've tried looking through the API and demos, but I can't seem to find any resource to address this problem. Any help would be appreciated 🙏 Thanks!

[tambien]

I would suggest hoisting the PolySynth creation and scheduling outside of the onclick handler. All of those notes scheduled are shared on the same Transport, so each time you click start, you are creating a new synth and note sequencer and adding it to the same global transport. I would suggest that you only create those components once and then simply start/stop the Transport from the click handler.

[philip-nguyen]

I pulled out the synth and sequencer object creation outside of the onclick handler though it behaved similarly. I added a Tone.Transport.cancel(); when stopping the playback and now it works the way I want! Thanks for your reply and help!