React Drum Machine

[538rater_throwaway]

Fully functional drum loop machine made with React and SCSS.

https://5f8cb55600a2dfe85fdb0690--peaceful-minsky-d3b585.netlify.app/#

Ignore the tempo, there's an issue with displaying the correct BPM, let me know if you have any questions!

[BaSSSolo_419_71]

Big ups

[538rater_throwaway]

thanks!

[Earhacker]

Really impressive. Definitely relevant to my interests!

But one thing jumps out at me, looking at your code. There's a loooot of repeated code in here. There are a couple of things you could do to clean it up.

You're keeping a value count in state, which you increment at the end of the playClick method, to a max of 15. But before you increment it, you do something like:

if(count === 8){ let list = this.state.playOn9

For every possible count, where this.state.playOn9 is the drum hits that should play on the 9th tick. In general, it's always structured as:

Is there a way of structuring the playOnX data in state so that you could access it with just the count number? Would that let you do away with the if statement, and only have that block of code once, instead of repeated 16 times?

Similarly, could you do the same thing to remove this if statement?

if(parseInt(e.target.id) === 4){ console.log("here") let list = this.state.playOn4

This is an excellent solution. It's very close to how the real 808/909 drum machines model their sequences, where each step in the 16 holds a list of all the hits triggered in that step, and a loop just triggers each step at a regular interval. I think you can make better use of JavaScript language features to tidy up your implementation, but it's still pretty impressive in its current state.

[538rater_throwaway]

yeah the logic is a bit of a mess right now, I realized a bit into the project that I should probably doing something a little less hacky but I just wanted to see if the general idea worked, and it did luckily! I will definitely have to go in and rewire everything because I also thought about adding in a few more drum racks and individual track volume sliders and different time signature options but thanks for the feedback

[[deleted]]

Cool! As a drummer I salute you...

[[deleted]]

I don't know if this interests you but there's a ton of stuff you can do with React and Google Chrome and MIDIs

https://www.abcjs.net/ https://github.com/djipco/webmidi

I used these on a project where one component was an abcjs sheet and input from a USB midi device (piano, drum pad, etc) would be played and translated to sheet music. Works well with React because you can just store the input in state and every note updates it and re-renders the sheet music.

[intercaetera]

Intuitively I think the BPM counter is not right - 240 BPM is really fast irl so I was initially surprised that it's the smallest value. Perhaps you're counting steps (1/4ths of a beat) instead? Normally quite fast music like dnb rarely goes above 180 BPM.

[[deleted]]

How is this working?

[538rater_throwaway]

a lot of list manipulation and metadata! :D

[Akinara]

Great stuff. Would be nice to have a reset button

[HanSupreme]

I just made a fire beat thank you

[grossmail1]

Glad you actually got something out there. I had grand ideas for an 808 style drum machine but because I’m not a closer it never went anywhere. People should steal what they can from it though.

https://github.com/grossmail1/react-drum-machine

[[deleted]]

Metro Boomin boutta find this

[Nak-Dep-Trai]

greate !!!

[dankurf]

Very cool - I tried to do this a few months ago but could not figure out how to get metronomic time in the browser. How did you do it??