How to make a basic Javascript Drum Machine

Today I'm going to show you how I made a basic drum machine using Javascript and CSS.

The full code can be downloaded from Github. You can view the demo at codepen.

First, we're going to create the drum-machine element

Next, we create the display element and append it to the drum-machine element

followed by the drum-pad-wrapper element

Inside the drum-pad-wrapper there are going to be 9 pads to press: 'Q', 'W', 'E', 'A', 'S', 'D', 'Z', 'X' and 'C' in that order. Each pad will be linked to an audio tag as well as a description for the audio which will show on the display. Furthermore, each pad's letter must have a keyboard event which will fire the corresponding pad's audio. In order to achieve this I decided to create an array of objects for the pads which includes the key, a description and a url for the audio

I then iterated over the array

within that loop I set j to equal i because, for whatever reason, functions within a loop don't pick up on the value of i, but they do pick up a variable set within the loop

next I created the drum-pad element.

There, you'll notice pads[i].id. If you take a look at the pads array of objects we created a minute ago, you'll see an id property within each object. Where i equals 0 on the first iteration, pads[i].id would translate to pads[0].id which has a value of 'Heat-1'.

Next I created the drum-pad-text element which represents the keyboard key for each pad and appended it to the drum-pad element.

Then I added in the audio element, set its source to the iteration's object url property and appended that to the drum-pad element.

Next I set the click function of the drum-pad element to play the audio clip and change the text in the display to the corresponding description

followed by setting an event listener for the iteration's object key, ie "Q", "W", "E" etc. to play the audio clip and change the text in the display to the corresponding description when the keys are pressed

The final thing to do in the loop was to append the drumPad to the drumPadWrapper

Then all we need to do is apppend the drumPadWrapper to the drumMachine and add the drumMachine to the body

That's it for the Javascript. Now when you load the page, you're going to see a list of letters going down the screen, which play a sound when you click them and shows a description of the sound. You could even press the keyboard keys and you should get the same sounds. Now we need to add in a bit of style. I'm going to keep it as minimalist as possible. Not much point in getting fancy here, but your imagination's the limit when you're making your own.

First I set some defaults for the body along with a gradient background. I used a css gradient generator to get the background property, so much better than trying to guess the colour combinations from memory.

Next, we want to make sure the audio elements are hidden. I mean, I couldn't see them on the page anyway, but just in case I added the property in the stylsheet anyway

Next it was basically just positioning and sizing the drum-machine and display elements, you can mess about with these properties and make them your own. In fact, I recommend messing about with all the properties and see how you can make it your own.

The pads are a 3 x 3 block. To achieve this I used the grid function on the drum-pad-wrapper element. First I set the grid area for the keys

Then I set the drum-pad-wrapper element to grid and stated the positions of the above grid areas, along with more sizing

More sizing and positiong for the pads. Here I set a margin to move the pads away from each other

and finally set the font size and weight of the pad's text

and that's all. Now when you refresh the page you should see something like

The full code:

Javascript

css