Hey guys!
Please review my machine.
Overall I felt okay about this project not super satisfied with its design though.
Hey guys!
Please review my machine.
Overall I felt okay about this project not super satisfied with its design though.
Nice ,send the source.
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 ).
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).
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:
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!
@jenovs Thanks this is a really good feedback.
document.addEventlistener("keypress", ...)
.@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?
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
Good one. I think I will swap some colors around when I play back recordings.
Another good one!
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’.
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.