Terrible Drum machine

I completed the drum machine challenge. I tried to make something different…
Unfortunately the machine is not work as well as I expected… :frowning:

Codepen link

You can test here

It’s far from music… :frowning:


Hi, the “D” button, or the kick, doesn’t seem to make any sound for me.

Hiya @lendoo, what exactly doesn’t meet your expectations?

From what I can see, you’ve got something that looks like an electronic drumkit. The audio works, keydown effect works, and, when powered on, it displays what type of sound effect is clicked. The “power on” effect is something I’ve never thought of, and it works perfectly! You’ve done a really great job!

There are some user issues that I’d like to point out. When the drumkit isn’t turned on, I recommend adding a “click symbol to power on machine” or something like that on the display. You could make the letters inside each circle larger, centered, and brighter so users know which keys to click. I’m also unsure of what you’re trying to do when a user hovers over the display. It lists all the drum’s sound effects, but immediately disappears if I move my mouse.

Don’t call it terrible, you’ve done really well. Just a bit more improvements and you can polish it off :slight_smile:

Thanks for your opinion.
When hover the monitor, you can find an editor. Click next to the drum and the editor table will dinamicaly grow. Try to create something and press play… I have no idea how to improve the sounds… it’s so terrible…

Wow, the hours I have spent in ableton live to make my drums sound as raw and gritty as this. I find it quite cool ( albiet the lag, but that might be at my end. )

Keep it up mate. :slight_smile: I love the colors and the general design of it. Myself cant wait to reach the drum kit project. It will take a long time though ( still finishing my responsive front end projects. ) :smiley:

It was a lot of fun playing around with your drum machine, kept me busy for fifteen minutes or so. Dont beat yourself up like this man, this is awesome. :slight_smile: Keep creating!