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.
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
<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:
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
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
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
> -1. If
true, then we can call the function to play the sound.
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
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
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!