So today’s my first day of the challenge and this is what I did:
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.
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.
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.