Day 1 – JavaScript30 — JS Drum Kit

For the next 30 days, I am going to watch, learn and blog about a new, rather, an exciting course called JavaScript30 by @wesbos. This course is perfect for the ones who want to learn JavaScript and do fun things with it.

Before you start, make sure to download the starter files from here: https://github.com/wesbos/JavaScript30

Let’s get started

*Drum Roll* Moving on towards the first lecture i.e. JS Drum Kit. Go to the folder “01 – JavaScript Drum Kit” and open it in your favorite text editor.

Starter File

Next, if you are not very tempted by the solution present in the index-FINISHED.html file then open index-START.html file. This file already contains some HTML code inside it. If you preview this file in your browser, you are going to see a screen like this:

Now go ahead and try pushing buttons from A to L in the middle row. Nothing happened, right? That’s because we are going to build a drum kit in the next section.

addEventListener

For a drum kit, the first thing that you need to do is to listen to an event in JavaScript which triggers when a key on your keyboard is pressed. And then attach a function to this event.

For the keys, the event is called keydown. We are going to use this event in the addEventListener function to connect a new function called playSound with this event.

This function will then respond each time a key is pressed in the browser. Copy and paste the following code in the script tag present at the bottom of the file.

function playSound(e) {
 const audio = document.querySelector( `audio[data-key="${e.keyCode}"]` );
 const key = document.querySelector( `.key[data-key="${e.keyCode}"]` );
 if ( ! audio ) return; // stop function from running.
 audio.currentTime = 0; // this will rewind to start.
 audio.play();
 key.classList.add( 'playing' );
}
window.addEventListener( 'keydown', playSound );

Here is the point by point breakdown of what this function is doing.

  1. On the event of keydown, function playSound is triggered.
  2. Now the event, e, which is being passed as a parameter to the function playSound contains all the information of the event that occurred. Including the information about the key code which was pressed.
  3. All the audio tags and key tags have a data-key. This attribute contains their corresponding key code.
  4. We are now going to select the audio and key tag which is being triggered. If there is no audio file for the key code, then our function will stop. Otherwise, it will play the audio file and add a transition class to the key at the same time.

Removing transition

By this point, you have successfully attached a playing sound to keys A to L on your keyboard. And most probably, playing with it. But if you observe carefully, you will notice that once the key is pressed. It is not going back to its normal state.

To take the key back to its original state, you need to do something. Well, you can copy and paste the following code at the end of the script tag to make it go back to its original state.

function removeTransition(e) {
 if ( e.propertyName !== 'transform' ) return; // Skip it if it's not a transform
 this.classList.remove( 'playing' );
}

const keys = document.querySelectorAll( '.key' );
keys.forEach( key => key.addEventListener( 'transitionend', removeTransition ) );

This piece of code is,

  1. selecting all the keys with the class “key.”
  2. And adding a removeTransition function to an event called transitionend. So that every time, the event transitionend is triggered, removeTransition is called.

removeTransition is going to remove the transition class “playing” from the key whenever the even with property name “transform” is applied.

Now, if you go and refresh the web page in your browser. You will see that whenever you hit the key from A to L, you will hear a sound and the transition on the key will toggle.

Conclusion

That’s it. You are done for the day 1 of the course. If you have or find any other interesting way to implement the Drum Kit, then do share it with me. You can reach out to using the comment box below, or on my twitter @MrAsharIrfan.

Leave a Reply

Your email address will not be published. Required fields are marked *