Build a Drum Machine

My code for drum machine using React:

I have managed to add record and play functionalities which work — but I am not sure if this is the right way to do it in react.

Would appreciate your thoughts!

Thanks
Ali

1 Like

I love it! I like the pulsing effect. I think people associate green with on. I would have the on, record and play buttons green when on, and blue w/t outline when off. Also, the buttons look like stretched circles now. Try pixels instead of % for border-radius on .btn.

1 Like

i had the same thought! I thought ‘green’ meant it was working and I puzzled a bit over why nothing was working when i clicked. Then finally thought to click the button to see if something would happen.
I would suggest making the default setting ‘on’ and turn it off only when someone clicks, not the reverse (unless it is a design requirement)

1 Like

After I’ve found out, how it works, I like it, great work!

Suggestions:

  • the green color of the icons did indicate to me, that it is running from the start on, but I have to click the left button to start it, this seems confusing
  • also that the button gets red, when it is running
  • I recorded a long track, but I can’t stop it, only start it from the beginning
1 Like

Yes, I think red would indicate stop and green go. Also, I think your suggestion of a pause button is nice.

Thank you all for the responses. Have interchanged green and red colors on control buttons as suggested.

Plan to add a pause/stop button feature shortly.

1 Like