SVG - Music Machine

Hi,
Since i make music my self,
so i decided to take my time with drum machine project, and make it as good as i can.
I used SVG of my logo to build this project.
it has
1- 9 Drum pads
2- Piano keys
3- Personal sound collection
4- speaker :smiley:
Hope you guys like it.
Enjoy playing and making music :smiley:

1 Like

Thank you, much appreciated :slight_smile:
yeah i know about those click and tap issues, thinking of ways on how to resolve it, any suggestion would be appreciated.
and the speaker pump, if there is a way of detecting low end frequencies in a sound via JavaScript, then sure
of course, let me look around on Stack overflow.

hi Farhan

I just took a look at this and as Iā€™m not familiar with the project, I was wondering if it is supposed to fit into a single view-screen or do I have to scroll up and down on purpose for this design? I found scrolling to be awkwardā€¦
Also I thought when I first went in, that i should be able to click on the ā€˜drum machineā€™ picture but then I scrolled down and saw a ā€˜lets playā€™ button so i tried that since my clicks werenā€™t doing anything. So it seems that without some introduction, your interface is not very intuitive. (ie. an intuitive interface is one that a user immediately knows what to do with. but in this case, thereā€™s an additional ā€˜forcedā€™ step before we can actually play)
To be honest, if you hadnā€™t specifically asked me to review, I would have thought it was broken and not bothered to scroll down at allā€¦(to find the play button).

So if you can think of a way to make the landing page work with the view port height that would be my advice at this point. (also the words ā€œFARHAN BEATSā€ I feel should be made to appear somewhere at the top right or left, not under the big img)
I do have some other nitpicky things I could say about the drum machine itself but I think fixing the design of the landing page is much more important so I will refrain.

Thanks for inviting me to review, it is always fun to see these projects!

1 Like

This is great, Thank you for this in depth review and your time,
it really is amazing when a another set of eyes looks at your work, points out stuff that you simply ignored or didnā€™t think it was important enough.
i will make sure to go play around with the design to fix those issues :slight_smile:

thanks for the invitation. I just thought of something, what if the initial image is the button! (that is, instead of a separate letā€™s play button, when someone sees the first image and clicks it, it immediately animates and moves us into the play mode?)

Beautiful creativity man! my only feedback is when you press the keys some text overlaps the display so you might want to tweak that out and you should change the cursor to pointer when you hover to the keys, also add some padding for the responsiveness, i notice the small the screen the sound is cut short, other than that itā€™s cool!