Hi everyone, I have completed the Drum Machine project. While it passes the tests I would like some tips for improvement. Would anyone be able to provide feedback to point me in the right direction? Thank you in advance.
Link here : https://codepen.io/cgriffiths5/pen/xxRrEPZ
I don’t really have too much feedback.
I might suggest trying to create another version that uses a more data-driven approach. I.e. having an array of objects for each drum sound with the source, id, key, etc., and then mapping over it. If nothing else just for practice. It will make the component cleaner and will likely also make it easier to change and expand the app (it’s more scalable/maintainable).
If you use the currentTime property and set it to 0 before calling play you will be able to play the sounds faster. Which from a UX perspective feels better (less laggy).
audio.currentTime = 0;
audio.play();
sound.currentTime = 0;
sound.play();
Good job, keep it up.
Thank you for your time. I appreciate it.
Everything seems to be working fine. You’ve passed all the tests but I sort of feel like you did the bare minimum and thus you haven’t challenged yourself as much as you could. At the least I would think that any app that produces sound would have a volume control. Adding at least another sound bank would be cool.
There is one accessibility issue that should be fixed though. The black text on dark gray background doesn’t have enough contrast to be easily readable. You’ll need to lighten up the button color. Use the WebAIM color contrast checker to make sure it is accessible.
Thank you for your feedback. Will take your advice onboard.