Drum Machine - Feedback and Questions

Code Feedback
1

Hi Campers!

I am looking for feedback on my Drum Machine. As of this writing, I still need to update the volume and pan knob to make those functional. I also have some questions and comments that I hope to get some help on!

This challenge dealt with several technical challenges, namely 1) Event Listeners, 2) Web Audio API, and 3) React Organization. I found some of these concepts to have a bit of a learning curve, and I hope to get some more clarity on them in this forum.

  1. Web Audio API
    In working on this project, I came across Web Audio API. (documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) Can someone give me a more precise explanation of why Web Audio API exists? And is Web Audio API necessary for this challenge? Until I looked it up, I had no idea how to adapt the base HTML audio controls mechanism into the React State.

  2. Limits of CodePen - React Organization
    By this point in the Front-End projects list, I realized that CodePen as a development platform has reached its limits. Namely, the code was getting so long that you had to constantly “scroll” through the “JS” part of the editor, and I would get confused a lot. I am moving to another development platform. I’m wondering if you have any advice on how to best “break down” the app into multiple components, or if that is personal preference. For instance, I put the sound data into a JS object, then mapped that information to the drum machine buttons. Is that just one way to do it, or is there a better way to organize app data? I’m hoping that my internal code organization gets better once I move to another IDE platform, where I am kind of “forced” to organize things by folders and component files.

  3. Event Listeners
    Linking the keyboard keys to the “onClick” of the drum machine was the highlight of this challenge, particularly when you want the buttons to “light up” the same way via “onClick.” You can easily do this in CSS pseudo classes (“active” or “hover”), but to make the buttons behave the same way via a keyboard key you need to involve the React state. Looking back at the FCC tutorials , Event Listeners was covered in the React portion, but not really in the JS portion. I found event listeners to be a tricky concept, and I’m wondering if someone has a good documentation resource for it, specifically pertaining to vanilla Javascript.