Drum Machine App

Code Feedback
1

Hello dears!

I hope all of you are doing great.
Please could you give me some comments about my code for Drum Machine App.
https://codepen.io/pavoninushka/collab/PoWRVmO

Thank you a lot and gave. a great day!
Galina

6 Likes
2

Really nice project, hope so you make good projects like these in the future also!!!

1 Like
3

Amazing project! This gives me a lot of motivation to go through the curriculum and projects so I can make something like this too.

1 Like
4

Thanks a lot for encouraging words @priyanshusaxena

6

Thanks! You definitely need to continue your journey! Take care @Trek182021

7

Love your project! amazing work

1 Like
8

Overall, nicely done, but I do have some suggestions.

  • Personally, I think each drum pad is a <button> and thus you should use <button> instead of <div>. Since the drum pads can be played by typing the letter individually it is technically keyboard accessible, but I think semantically these are buttons (because they perform an action) and thus using <button> is appropriate here and will give you additional keyboard functionality (such as the ability to Tab through the drum pads).

  • I wonder if you shouldn’t have the drum pads in a 3x3 grid at all times instead of letting them flatten out as you widen the browser window? Since these do directly correspond to keys on your keyboard it seems logical to place them that way on the page.

  • If I press and hold a key down it plays a sound, and then when I let up on the key it also plays a sound. The length of the hold doesn’t have to be that long (perhaps half a second). Was this your intention to have it play the sound on both the keydown and keyup events?

  • I think you should challenge yourself a bit more and add a few more features. For example, I think it is pretty much standard that any app that plays sound has a volume control on it.

9

This is really cool!

Future enhancements could be

  • displaying on the page what the user has pressed so they could see/save the “beat” they created.
  • give the buttons a raised look and when pressed looks like it’s being pressed down.
1 Like
10

Thank you a lot @htmlfan

1 Like
11

Hi dear Bruce! Thank you a lot for your always very appreciated advices!
I did some changes and added two new features ç volume control and beats history panel. I was a bit struggling with the second one in order to make to sound all the beats in a proper way. So I used setTimeout for this. Let me know if you think there are better ways to do it.
Thank you a lot!
Take care,
Galina

https://codepen.io/pavoninushka/pen/PoWRVmO

12

Hi dear @hilbug ! Thank you again for your advices! I tried to do adjustments following your advice.
Was a bit struggling with displaying beat history and then to make them sound like one after another. So I use setTimeout. Let me know if you have some better ideas how to do it in a more proper way!

Thank you again!
Galina

https://codepen.io/pavoninushka/pen/PoWRVmO

1 Like
13

@Galina Your app looks great. I am also at the same level. Yesterday I created the same app which can be found here https://drum-machine-bychandan.netlify.app/
By clicking on the source code, you can view the code on my github repo. If you are interested, you can have a look at this as well.

It doesn’t pass test #6 as it doesn’t have an eventlistener attached to listen to keydown event, I will hopefully completely add it today.

1 Like
14

setTimeout is definitely one way to do this, and for a simple playback like this it works just fine. The issue with setTimeout is that it does not really guarantee that your function will be executed at exactly the time you requested. For example, you are setting the interval in increments of 200 milliseconds, but depending on how busy your browser is at the time, your functions may not execute at exactly 200, 400, 600, etc… milliseconds. So if you want more precision at what time your sounds play (for example, if you had a looping sequencer) then you would need to “enhance” the timer to ensure your sounds play exactly when you want them to.

The way I did this with my drum machine is to use a web worker to generate “ticks” at specific time intervals (depending on the current tempo value) when the sequencer is running. Using a web worker takes this process out of the main JS thread and runs it in its own thread, which keeps it from getting bogged down by anything else that might be going on in the browser, thus allowing for greater precision in timing. The web worker uses setInterval to generate the ticks.

When each tick is generated, a “sound scheduler” looks ahead just a little bit in time (basically, to when the next tick is going to occur) and sets up all the sounds that need to play on that next tick using a very precise timing mechanism that is provided by the Web Audio API (it allows you to all but guarantee that a sound will be played at the exact millisecond that you schedule it). Basically, the scheduler is always scheduling sounds for the next tick/beat so they are all lined up ready to play when that beat occurs.

3 Likes
15

Love your project! amazing job

2 Likes
17

@Galina I just tried it out and think it sounds great! It plays back like a real beat. :slight_smile:

1 Like
19

Great! Thank you so much for giving me ideas to improve :slightly_smiling_face: @hilbug

20

@A-Jordan thank you - thank you so much!!!

21

many many thanks dear @hod30020

22

hi dear @bbsmooth . Indeed I had a look at your drum machine app which is literally great! Thank you for your advice - I will try to implement it in my app. Take care,
Galina

23

Hi dear @croy4744 ! Your project looks super nice! Bravo! If you want you could try to challenge yourself (as I did by following advices of other people) and to create a display where the user could see which drum pads he clicked and then to make the “whole beat” sound.

1 Like