Let’s build a virtual piano!

I discovered this 30-day JS Challenge and decided to give the projects a try. School break starts in 6 days and I’ve been feeling the crunch for a couple of weeks now. But I stumbled across this great 30-day JavaScript challenge and decided that I needed to take it. One thing I learned from teaching myself to code is to do is FREQUENTLY. Personally, I find that 1-hour every day for a week is so much better than 7 hours for one day a week when you’re trying to learn a programming language.

So today’s my first day of the challenge and this is what I did:

Challenge #1 – Building a JavaScript Drum Kit

How the challenge works is you would download the starter files, watch the tutorials (follow along if you wish, or do it by yourself after the tutorial), and then build your project. The tutorial was pretty quick. Wes covered a lot within a 19-minute timeframe. The HTML and CSS has been pre-written and all you need to do is familiarize yourself with it, and then start writing your JavaScript.

The playing with the drum kit is easy enough to understand. The page displays different keys, each with a different sound. You hit the corresponding key on your keyboard to play that sound.

I chose to follow along and had to pause a couple of times throughout the video. After I got the drum kit working, I felt that I understood it, but wanted to do more so that I could re-apply what I just learned. So I decided to build my own project. Aaaand…I chose to build a piano.

My Challenge – Building a Virtual Piano & Making the audio play on click

From there, I built my own keys. The hardest part was actually matching the keys to the correct audio. I’ve studied music and played the flute for 10 years, but surprisingly I’ve never played the piano. When I was done, I wrote up a new function to also make the keys clickable, which wasn’t given in the tutorial.

JavaScript30 Drum Kit code

The drum kit JavaScript code was written so that the events are executed when the user makes a keydown action. I wanted the same thing to happen during a click. Rather than repeating that same function during a click, did some re-arranging.

During Wes’s tutorial, he had written the playSound function so that it plays during a keyDown event. I changed the playSound function to accept the keyId instead. This way, whether it’s a keyDown or a click event, I can grab the keyId from the event, and pass it to the playSound function which will play that corresponding sound.

To make the click event work, I wrote a for loop that iterates over all of the keyDivs, so that during a click event, it will grab the data-key number for the div that was clicked on, and play the audio that’s associated with that number.

Below is what my JavaScript ended up looking like.

Digital Piano JavaScript code

That process took a while. I’m still fairly new to JavaScript and trying to figure out the best way to write functions and make things work. But in the end I got to build this functioning virtual piano! You can also play with it here. 

I’m going to try and do my best to build my own version of the JavaScript30 projects and add my own personal twist. After all, that’s the best way to learn.