Building a Music Game in JavaScript: Part 1

Creating a basic beat maker with <audio> and async functions

Photo by Eric Nopanen on Unsplash

For my first project at Ironhack, I had to build a mini-game in four days. I chose to play around with DOM manipulations and the HTML audio element to build a 4x6 pad where the 4 columns are “beat times” and the 6 rows are different sounds that can be played at these times.

To add spice, the player has to hear a rhythm and then reproduce it in a limited time to score points.

The entire code is available on GitHub. It is a framework-free app and only Vanilla JavaScript was used building it. The final result looks like this:

I will strip the game of all the parts that actually make it a game (score, listen and repeat, timer) and focus on the beat-maker component that can be seen on the left side.

Inspiration

I started by following the music machine tutorial by Dev Ed (The Drum Machine tutorial from Wes Bos is also a recommended resource for that).

Now, instead of playing the notes when clicking/pressing buttons, let’s create a set of buttons to…