My Drum Machine plus Sequencer

I worked on my version of a drum machine for a week. I did not create it to fulfill the FCC project, but I will eventually convert it to a React project once I figure out how to deal with the known bugs (listed below) and fulfill the required user stories.

I have seen some incredible layouts in other’s drum machine projects. While the look and feel of my drum machine is “weak” compared to some of those layouts, I have not seen anyone include some of the features mine has (i.e. sequencer), so I am posting it here for others to see and play with.

If anyone sees any additional bugs, just let me know and I will put them on my “Fix” list. Also, if anyone has any suggestions on how to fix any bug you find or any of the bugs I have documented below, please let me know.

FYI - I am also quite aware that use setTimeout to control the playback of the sequencer is not as good as using the Web Audio API. It is something I plan to do when I create the React version though and have more time to dig into the Web Audio API documentation.

My design is fairly plain, because CSS and page layout is not my forte. However, it is the functionality that I had the most fun with. A week ago, I created a much more basic “proof of concept” of the drum machine with more procedural functions. I could see as I added more features, it was turning into “spaghetti code”, so I tried to make this newer version a little more object oriented and modular.

It will be fun converting it to React/Redux in the next couple of weeks. I am sure I will run into some more obstacles, because I am still a newbie with Redux.

Known Bugs:

  1. On Safari, when using the keyboard or the mouse, there is a major delay when playing the sounds and you can not play another sound until one finishes. I spent a long time trying to figure out a solution, but finally gave up. Figured this one out (see discussion below).

  2. The gradient background does not work in Safari, but I know I have to changed the syntax to get it to work.

  3. Sometimes during sequence playback, the timing gets off slightly (due to using setTimeout).

  4. There is no quantization implemented to help make sounds close together play at the same time during playback. I am currently working on an algorithm to make this a realty and plan to implement it with the React version.

  5. During playback of a sequence, I tried to make the background change only with the bass sounds (Q, E, Z, X), but something is not quite right with the logic, because sometimes when bass sounds play, the background remains as the black/white gradient. Ideally, I want to figure out how to use a css animation which fires instead of using the setTime, so I am open for suggestions.

Have fun!


Pretty cool how you wrote this app with vanilla JS.

I am curious how you implemented a solution to capture recordings with exact intervals as I typed them?

Sorry I can’t find bugs!

I basically start a timer when the user hits record and then push the key/button time key was pressed as a sub array into this array of sounds/times. Once the record button is clicked again, I take this sound/time array and create another array of sound keys and delay times, which is really just a set of all the time differences of the time array’s time values with the first time between when the record button was first pressed. Finally, when the play button is clicked, I loop through the waitTimes array and use setTimeout to play the specified sound of the current waitTime element with the time difference as the setTimeout delay amount.

The tricky part was figuring out how to stop all those setTimeouts if the user clicks the play button again before the sequence has finished. I solved the problem by creating an array of the setInterval ids and loop through them using clearTimeout to stop all setTimeouts from executing.

What took the longest was figuring out when to disable certain buttons and changing button colors while certain functionality was running or was stopped.

1 Like

Giving this a small bump to see if anyone has any feedback regarding the bugs I currently have.

As for #2 i think using the info in here may do the trick.

As for #1, i was trying to test it on the latest safari version supported on windows. Here what i see:


Any errors in the console?

I had a friend test it on his Mac in Safari and it actually displayed the drum machine. I did not even know there was a Windows version of Safari supported anymore. My guess is that the Windows version does not support template literals I use to create the drum machine pads’ html.

To be honest? I didn’t took a look into the console. let me try :slight_smile:

I need to add some polyfills I guess for browsers which do not support certain ES6 features.

I actually did discover today after more research, that Safari in general does not let more than one sound play at a time, so that is why I can not play multiple sounds at the same time or play the same sound again before the current playing sound ends. There is no work around for it and there is no explanation on why Apple designed it that way.

I bet your guess is 100% correct. :sunglasses:

Unfortunately my old macbook is dead because of the power adapter and i cannot test it on a real mac env.

I think you mean in the same “tab instance”.

It is very interesting to know how to deal with timers in javascript. I was looking in google and the information that I can get about it is very vague or maybe I expected to find simple solutions.

I’m a novice in object-oriented programming and it’s been hard for me to understand your script

I also agree that the sequencer must be a minimum requirement or record the sequence of sounds, which makes any drum machine in its definition.

I’m going to start on this project. I am considering a simpler solution thanks to functions like console.time(), registering the keys and the intervals between clicks in an array. I already have a skeleton of this idea that I will share with you when you have completed the app.