Making a Drum Machine - Part 2

Let's continue to make a drum machine!

We did some more research yesterday and started defining the drum machine's layout and node graph.

Recap

Yesterday we did some more research and realised that we would need to use the Web Audio API.

We also found a bunch of extremely helpful code examples from MDN which we can use as examples whenever we get stuck.

We decided on the node graph (though this may change...):

And finally we set up a basic layout:

HiHat
Snare
Kick

Let's get moving!

There's a few things I don't like about the layout:

  • When scrolling along I don't want the step measure at the top to be visible above the track names
  • Default scrollbar is super ugly
  • No whitespace under the tracks
  • Not a lot of whitespace around steps
  • Hard-coded track listings
  • Lax grid system will cause misalignments when I start changing track lengths
  • No lane lines could make things feel a little

I got to work fixing the layout. Sprinkled in a little bit of Vue logic and some subgrid and here we are - I think it's an improvement:

HiHat
Snare
Kick

So far I've not paid a lot of attention to any of the buttons (play, pause, mute). So those will probably get an overhaul along the way to the final product. But this is a decent bit of progress.

Wrapping up again

Okay... I've been terribly distracted today with various things. My phone has returned to me repaired and I've had some other work to continue preparations for.

It's bugging me that I've still not made the move to get this thing making sounds... BUT SOON!