Drum Machine review please! DR M1

Code Feedback
1

Hey guys!

Please review my machine.

Overall I felt okay about this project not super satisfied with its design though.

https://drm1.netlify.com/

2

Nice ,send the source.

3

I’m personally not a big fan of seeing document.getBlaBla in React code. Use refs.

Also there is an error in console if you press unsupported key (although app doesn’t break).

And without reading user stories on your GitHub it was hard to grasp how your drum machine works (but maybe I’m just slow :thinking:).

Btw, linter doesn’t like your styled-components syntax (css rule should end with a semicolon, but because you put semicolons inside strings, linter doesn’t see them).

4

First off, it works so that is a great start. The sounds, the recording and playback ALL work as a general piece of functionality. Now, with music, typically you want a beat in the background to assist people with recording, so maybe a running ‘click’ track in the background. Secondly, many drum machines/programs also have an algorithm (maybe down the road) that moves the recorded beat to the closest exact beat or fraction of it. So I I record a kick for example that doesn’t land on the 1 beat of a 1234 measure , then the program will move the kick to the closest beat so the music sounds consistent. This all may be too premature as I don’t know where you’re at and your skill set.

Questions to help you evaluate (while thinking about) your design:

  1. Why is there a power button?
  2. Did you consider colors when recording and playing back? It’s all red and seems very plain for the user.
  3. What about creating a saved list of recorded beats with titles and descriptions?
  4. Take the snippets from the above list and connect them.

Like I mentioned, the functionality is there which is awesome, now take what you have and implement additional functionality in the name of usability.

Great Luck!

5

@jenovs Thanks this is a really good feedback.

  1. Using refs when I retrieve dom elements right? I would think I still need document.addEventlistener("keypress", ...).
  2. Thanks, forgot to check for this.
  3. This was one reason why I wasn’t satisfied with my design because it didn’t feel intuitive.
  4. Are you using ESLint or default IDE lint? Although I think if you are using VS code it does use trimmed-down version of ESLint.
6

@orleansd Thank you this is another great feedback! Click sound when record button is pushed is a good idea. Adjusting beats is a concept hard for me to visualize in my head. Can you give me a link to a drum machine that does it as an example please?

  1. Mainly because I tried to follow this design somewhat. https://www.amazon.com/gp/product/B0116X17JW?pf_rd_p=c2945051-950f-485c-b4df-15aac5223b10&pf_rd_r=HXP3E0BXT9EWRVPG5M2F

  2. Good one. I think I will swap some colors around when I play back recordings.

  3. Another good one!

7

@topcoder Thanks, sure here it is. https://github.com/shimphillip/drum-machine

8

Yes.

Regarding event listeners:

Keypress is deprecated. Shouldn’t be using even without React.

You add event listeners by doing <MyReactComponent onKeyUp={this.keyUpHandler}/> (https://reactjs.org/docs/handling-events.html).

I didn’t add anything additional, so it’s probably from ‘create-react-app’.

1 Like
9

Nice project @shimphillip :slight_smile: :+1:

1 Like
10

Technical wise is way over my head at the time. That said I think it looks really good. For what is worth my two kids are having a blast playing with it. One thing I noticed is that what I assume is a volume slider does not seem to do anything.

1 Like
11

@gauravkukade @ChrisCline1138 Thank you for the compliments!

1 Like