Sequencer/Track: sample trigger timing

[bergersens]

First of all, very nice project. so intuitive! great!

I have built a drum sequencer.
unfortunately, the timing here is not quite correct. the rhythm sounds a little out of sync, as if the note is not played exactly on the beat. actually, tonejs should trigger the sample exactly, but unfortunately it does not sound quite like that in your implementation. have you ever had problems with this?

export const App = () => {
  const [playing, setPlaying] = useState(false);
  const [isLoaded, setLoaded] = useState(false);
  
  return (
    <div>
      <button disabled={!isLoaded} onClick={() => setPlaying(!playing)}>
        play/pause
      </button>
      <Song isPlaying={playing}>
        <Track
          subdivision="8n"
          steps={[
            ["C3", { name: "E3", velocity: 0.2 }],
            [{ name: "E3", velocity: 0.05 }],
            [{ name: "E3", velocity: 0.4 }],
            [{ name: "E3", velocity: 0.05 }],
            ["D3", { name: "E3", velocity: 0.4 }],
            [{ name: "E3", velocity: 0.1 }],
            [{ name: "E3", velocity: 0.2 }],
            [{ name: "E3", velocity: 0.05 }],
            [{ name: "E3", velocity: 0.4 }],
            [{ name: "E3", velocity: 0.1 }],
            ["C3", { name: "E3", velocity: 0.4 }],
            [{ name: "E3", velocity: 0.05 }],
            ["D3", { name: "E3", velocity: 0.4 }],
            [{ name: "E3", velocity: 0.05 }],
            [{ name: "E3", velocity: 0.4 }],
            [{ name: "E3", velocity: 0.05 }],
          ]}
        >
          <Instrument
            type="sampler"
            onLoad={() => setLoaded(true)}
            samples={{
              C3: "samples/drums/1/kick.wav",
              D3: "samples/drums/1/snare.wav",
              E3: "samples/drums/1/hat2.wav",
            }}
          />
        </Track>
      </Song>
    </div>
  );
};

greetings, Jonathan :)

Here the samples:
samples.zip