Answer 1

Schindlabua actually the brain isn't soooo accurate with timing differences. Most of us can't hear the difference between sounds that are played 1 millisecond apart. Your eyes would definitely perceive a difference if 2 visual sources were spaced like that.

Answer 2

Ausgrindtube fair! Though setTimeout can easily be inaccurate in the tens of milliseconds.

Answer 3

You are going to need an array of booleans for each sound that has as many entries as you have buttons in your UI. Everytime you tap a button in the sequencer the array should update.

You could give your .patSquares an index, so you know which .patSquare is supposed to play at which time.

<div class="patSquare" data-time="0" data-sound="kick" />

And onclick update your sounds arrays:

e.addEventListener("click", () => {
const sound = e.getAttribute("data-sound");
const time = Number(e.getAttribute("data-time"));
sequencer[sound][time] = !sequencer[sound][time];
})

And once you have that you can think about how to schedule the sounds :) setTimeout is very imprecise and the human ear is very good at hearing timing differences so it's not at easy as it first seems but yeah, cross that bridge when you're there :)