SVG - Music Machine

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

Found a possible bug. If I am using a mouse and click on a button and while the left mouse button is still down drag over to another key on the keyboard or button on the drum machine, then it stays down (playing and stays highlighted) as if I was still holding the button down.

Although not a bug, I think it would be cool if you could only make the speaker “pump” when the bass drum or other deep bass hits. It seems odd to have the hi-hat make the speak “pump”.

I am very impressed with the overall design and like how it is responsive on smaller width screens. Great job!

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!