I Made a Game Boy Drum Machine with JavaScript, HTML and CSS
If you were born in the 80s and are anything like me, you probably still have a slight obsession with games from the 8-bit era. As I look back, I actually find myself appreciating the music from old Nintendo games more than the actual game in many cases (there were some bad ones, ok?). Often a melody will get stuck in my head — not knowing for days where it came from until I realize it was from a certain game that I sank countless hours into as a kid.
So when I recently came across a tutorial by Web Dev Simplified on how to make a JavaScript piano, I decided to create it but use Game Boy sounds instead. The Game Boy sample pack I used can be downloaded for free, here.
The first step is to open a code editor of your choice — I’ll be using VS Code. You’ll need to create 3 files and one folder: index.html, index.js, style.css and a samples folder. Pick out 10 .wav file samples from the sample pack that you want to use and add them to the sounds folder. Next we want to create a div with 10 divs (one for each sample) inside of it. Make sure to create a data-sample=”sample name” attribute and give them all the class name of sound. Add in <p>s with <br> and enter the name and keyboard key to press, I used the home row. We’ll also create 10 audio tags with our sample sound files. It is crucial that each audio id be exactly the same as the corresponding dataset sample attribute:
Next, we’ll add some simple css to our .instrument and .sound classes. We’ll make a simple row that is responsive to the browser window size using Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ . We’ll add styling to the .sound class to make a circle for each element, which will be spaced evenly inside the flexbox. We’ll also add some light styling to the p elements:
Go ahead and run the command <open index.html> in your terminal to open the file in your browser. If everything is working properly you should see something like this:
Now for the JavaScript.
The first thing we’ll do is put all of the keyboard characters that we are going to use in an array and assign it to a variable. Mine looks like this const keyboardKeys = ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';']. Next select all of the .sound class divs with querySelectorAll and assign them to a variable const sounds = document.querySelectorAll(‘.sound’).
Now we will add an event listener to the entire document that will listen for keydown which just means it’s listening for any keyboard presses. The first thing we do is make sure that if a key is pressed down and held, it won’t just rapid fire play and repeat the sound; if (e.repeat) return we just return so it doesn’t go through to play the sound. We’ll take the ‘keydown’ event and assign it to a variable called key. Now we can set a variable of keyIndex to keyboardKeys and the index at the key pressed. So if the key pressed is in our keyboardKeys array, it will set the keyIndex to the location of the key that was pressed in the array. So if I type g, the keyIndex is going to be 4. If I press a key that isn’t in the keyboardKeys array, then the index won’t be found so it will return -1. So let’s create a conditional to check if the keyIndex is > -1. If true, then we can call the function to play the sound.
The playSound function takes in one argument. We are going to pass in one div from the sounds array at the keyIndex. So think about it, if I press g on the keyboard, it will give us the keyIndex of 4. If we pass that index to the sounds array, we’ll find ourselves at the 4th index which is <div data-sample=”perc3" class=”sound”><p>perc<br>[G]</p></div>. We will pass that into the playSound function. Once inside, we can use the dataset sample attribute of the div to provide the correct audio id of the corresponding sample sound (it will be perc3).
We save the selected audio via id in the sampleSound variable. We can set the currentTime = 0 property to zero — this will allow the sample to restart as fast as we want it to, rather than us having to wait for it to finish playing before we can trigger it again with a key press. Now we simply call play() (which is a method for playing video or audio in JS) on the audio sample that has been saved into the sampleSound variable. If everything is set up correctly you should be hearing sounds now when you play your assigned keyboard keys!
GitHub repo: https://github.com/kylefarmer85/game-boy-drum-machine-js
