The app used the HTMLMediaElement API and event listeners.
The idea is to get a single drum pad component completely working first before reproducing a complete drum kit. This includes the functionality of a mouse click event and keyboard events.
The keyboard user-events are done with event delegation.
The mouse event is attached on every <button/>. My attempt on event delegation on this had the drum pads not responsive - not good UX for me. The little to more code and performance overhead cannot be helped.
- Event delegation: freeCodeCamp article
- Best places to attach event listeners: stackoverflow
- Events:
- Remove event listeners: reference
The HTML5 <audio/> is used for project specification. However, an article below for future reference:
- Web Audio API over HTML5
<audio/>:
The drum-pads.json file is fetched to React. This is used to store central app-drum-kit data. The data is then passed onto the iteratively rendered component. How to manually create a JSON file? See MDN.
Using React.memo and useCallback to avoid child component re-render when parent re-renders. Reference This is important when not all changes in the parent component is needed by every child component.
CSS Grid: learncssgrid.com
This is used to manipulate the <audio /> element's playback.
The currentTime property and play() method is used for a reactive sound response on click.
The loadstart is used for