DEV Community: prashanth

Virtual Drum Kit using Javascript

prashanth — Sat, 15 May 2021 06:19:31 +0000

Hello everyone,

Hope you all are safe during this pandemic. I have started a new series where I will be posting Javascript projects for beginners.

Each post in this series mainly comprises of two things,

       1. TIL while building them.
       2. Project explanation.

So Let's start,

What we are gonna build today is a Virtual Drum which,

       1. Has visual representation of the keys
       2. Plays a audio file when pressing its 
          corresponding key
       3. A small animation indicating that the particular 
          key is pressed - Scales up(make it appear big)  
          for a fraction of a second and scales down while 
          maintaining a smooth transition.

TIL

1. transitionend

It is an event Listener which gets triggered when the transition gets over as the name specifies. To know its use case read the entire post.

2. data-*

Data attribute allow authors to create custom data to apply to their HTML elements to store extra data. They help extend the information that HTML can communicate to script.

3. defer vs window.onload

Both are used to load the script after the document has finished parsing inorder to prevent the script accessing the DOM elements even before parsing stage is over. Using defer and window.onload are not the same even though they serve the same purpose of loading script. Load events are triggered only after deferred scripts run.

4. background-size

cover:
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
contain:
Resize the background image to make sure the image is fully visible
auto:
Default value. The background image is displayed in its original size

Project Explanation

<div class="parent-key">
  <div data-key=65 class="key">
    <div>A</div>
    <span>Clap</span>
  </div>
</div>

<audio data-key=65 src="sounds/boom.wav"></audio>

This is the basic markup for a single key and its corresponding audio. audio is the tag which is used to include sound in html . It has got the audio api which can be used to manipulate the audio file to play, pause, reset ... and much more. Data-*(data attribute) has the value equivalent to the ASCII value of the key.

body {
    background-image: url('background.jpg');
    background-size: cover;
}

.parent-key {
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height:100vh;
    flex-wrap: wrap;
}


.key {
    color: white;
    font-size: 40px;
    border:3px solid black;
    background-color: rgba(0,0,0,0.4);
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .1rem;
    transform: scale(1);
    transition: all 0.2s ease;
}

.key span {
    font-size: 14px;
    color: #ffc600;
}

.playing {
    transform: scale(1.2);
    border: 4px solid #ffc600;
    box-shadow: 0 0 1rem #ffc600;
}

For the styling part of the markup, I have used flex to center align the keys vertically and horizontally. Background image is included using the url .For remote image, url is specified and for image available in your directory, path is specified.The class playing is added to the element when the key corresponding to the key in the UI is pressed and removed after a fraction of a second. The class playing makes the element bigger in size(transform: scale(1.2)), applies larger border and box-shadow(highlights the box).

Till now we have completed the markup and styling part. Now let's give functionality to the virtual drum kit. When a key is pressed,

          1. Play the ``audio``
          2. Attach the class ``playing``
          3. Remove the class ``playing`` after the 
             transition is over.

Let's attach an eventListener(keydown) to the window object so that whenever a key is pressed the eventListener gets triggered and the function execution starts. We should execute the function only if you press the keys for which the audio must be played, so let's give a if-check which looks for the audio element in the html file using the keyCode corresponding to the key pressed.


window.addEventListener('keydown',function(e){
   let audio = document.querySelector(`audio[datakey="${e.keyCode}"]`)
   if(!audio) return;
})

Using the audio element we now can play the audio using the play method in the audio element api- audio.play(). when you run the code , when you press the key you want to play the audio file , audio is played but there is a problem here. Lets say the audio file is for 3 seconds for a particular beat, you cannot be waiting till the audio file finishes(in the case you want to press the same key multiple times),so we must reset the time to zero(audio.currentTime = 0;).By now, if you press the audio keys we can hear the corresponding sound.

But we need some animation to indicate that the particular key is pressed. This can be done by adding the class playing to pressed key element with a smooth transition using the transition property in css. Get the key from the document api and add the class to it.

window.addEventListener('keydown',function(e){
    if(!document.querySelector(`audio[data-key="${e.keyCode}"]`)) return;
    let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    let key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
    audio.currentTime = 0;
    audio.play();
    key.classList.add('playing');
})

Now when we press the key, the key element in UI scales up, but we need to scale down by removing playing class after a fraction of second. One way of doing this using setTimeout function. Using this function we can delay for a fraction of a second of a second and remove the class. It works fine but the issue we will face is, sometimes it messes up with the transition property in css(transition: all .07s ease;). The better way of handling this situation is listening to transitionend event, which executes a function when the transition ends. So now we can remove the class playing after the transition gets over.


window.addEventListener('keydown',function(e){
    if(!document.querySelector(`audio[data-key="${e.keyCode}"]`)) return;
    let audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    let key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
    audio.currentTime = 0;
    audio.play();
    key.classList.add('playing');
})

let keys = document.querySelectorAll('.key');
keys.forEach((key)=>{
    key.addEventListener('transitionend',function(){
        this.classList.remove('playing')
    })
})

I hope you were able to learn how to make a virtual drum. Follow me to read more javascript projects and don't forget to like because it will motivate me 😉.

Assets(audio files and background image) and code files available in this repo👇🏻

prashanthsasidharan / javascript-projects

This repo consist of assets and code files for every js project I create.

javascript-projects

This repo consist of assets and code files for every js project I create.

View on GitHub

Header Image By PlayTheTunes

Hoisting in Javascript(Part 1)

prashanth — Thu, 13 May 2021 03:56:49 +0000

   Interviewer: Tell me, what is variable hoisting in JS?

   devDood:  The concept of variable and function 
             declarations to physically moved to the top 
             of your code is called hoisting

Is this factually right??🤔

Absolutely not!!!

If this is not the answer, then what is variable hoisting?

The main agenda of this post is to make you understand how hoisting works in Javascript. I highly recommend you to read the post on execution context before continuing further.

How Does JS code run - Execution context and Call stack

prashanth ・ May 11 '21

#javascript #codenewbie #executioncontext #webdev

So Lets start,

In Javascript, both variables and functions are hoisted which basically means, no error is thrown when you reference a variable or a function before declaration.

Variable hoisting

console.log(a);
var a = 5;

Take a moment to think what will be printed in the console.

If your answer is undefined then that's right, but why it is printing undefined rather than throwing some error?. If you try to reference a variable before declaration in some other language(like C,C++,...) you will get an error sayinga is not defined. So lets find out why??.

    Note: Undefined and not defined are not same

    Undefined - It is one of the 7 primitive types in js 
                which is initialised to all the variables 
                during memory creation phase. It is 
                possible to explicitly assign it to a 
                variable(for ex a=undefined) , but good 
                practice is not to do so, as it is used to 
                serve a specific purpose

    not defined - In JS, it is a Reference error that we 
                  get when referencing to an undeclared 
                  variable as it is nowhere available in
                  its scope

If you have read the post on execution context , you now know that execution context consists of two phases - memory creation and code execution. During memory creation phase the special keyword undefined is initialised to variables declared in the code.

During code execution phase when the control goes to the first line , the js engine looks for the value of a in the current execution context's memory which has the value undefined.This is the reason why undefined is printed in the console.After which 5 is assigned to the variable a in the memory.If you remove the declaration statement (let a = 5;), then you get a reference error (a is not defined) as it is not available in its memory space.

Function hoisting

a();
function a(){
//Prashanth says Hi, 🙌🏻
}

Just like variables, functions are also hoisted. This is because, during memory allocation phase function code is copied as it is instead of initialising with undefined as we saw in variables. So in the code execution phase when the control hits the first line - function invocation, js engine will look in the memory, gets the function code and executes it gracefully.

Enough of all the boring theoretical mumbo jumbo...........
let's try to learn using chrome dev tools.

Learn hoisting using Dev Tools

We know that whenever js code runs, a global execution context(global scope) is created. Trust me, this is also true even if you didn't write a single line of code.

var a = 100;
var a = 200;
console.log(a);
function main() {
  console.log(a);
  var a = 400;
  {
  var a = 500;
  }
  console.log(a);
}
main();
console.log(a);

With all the basics that you learned above, try to figure out what will be printed in the console and write your answers with explanation in the comment section.

Voilà!!!. You have completed the part1 of hoisting.

Follow me back to know the detailed explanation of above code using dev tools - Part✌🏻 on hoisting

How Does JS code run - Execution context and Call stack

prashanth — Tue, 11 May 2021 02:46:24 +0000

Do you know how javascript code runs in the javascript engine?

If not, then I hope this post will be useful for understanding execution context and how the order of execution context is maintained by call stack.This fundamental concept also pays way to have the foundation to comprehend hoisting, scopes, scope chains, and closures

So lets start,

Before diving deep into the concept, we must have the basic understanding that Javascript is synchronous and single threaded,

1.Synchrounous - control waits until the particular code 
                 is executed and only then it moves to the 
                 next line.
2.Single threaded - only one call stack(explained below)

(ie) During memory creation phase and code execution phase in the Execution context, js code is executed line by line.

Execution context

From here onwards I will be addressing execution context as EC

Whenever we run a javascript code, a global EC is created, which comprises mainly of two phases,

Memory creation phase
Code execution or thread of execution phase

Let me explain this with a simple example,

var a = 5;
function Square(a){
  return a * a;
};
var total = Square(a);

As I mentioned before when we run this code, a global EC is created and the memory creation phase starts.

1. Memory creation phase

This phase is mainly about allocating memory for the variables and functions declared in the code.The js engine looks for the variables and functions from the first line synchronously. It is important to note that during this phase,

  1. For variables, a special keyword - undefined is 
     initialized by default
  2. For functions, the function code is copied as it is.

So in the above example variable a and isColorPrinted is initialized with keyword undefined and for the Square function, function code is copied as it is.

It's very important to understand this, because it will be easy to understand why variable hoisting happens in js, which I will be covering in the another post😉.

2. Code execution phase

After completing the memory creation phase, the code gets executed right from the first line synchronously. So in the above example, the assignment a = 5 replaces undefined for a in memory.When the control reaches the function invocation Square(a) a new EC is created within the global EC. Again for the new EC it has to repeat two phases. After memory creation and code execution phase are over, the value returned will be assigned toisColorPrintedin the memory part of global EC and newly created EC will be permantly deleted,If anymore function invocation happens then a new EC is created.For nested function,an EC will be created within the parent EC.

But for deeply nested functions and other complex scenarios it becomes really tough to manage the execution contexts, so here comes to our aid - call Stack

Call Stack

Call stack is responsible for managing the order of exection of EC's. When the js code runs,

    1. Initially:
       the global EC is pushed into the stack.

    2. After a function invocation:
       The newly created EC is pushed on top of the global 
       EC,

    3. When function execution is over: 
       It pops the EC out of the stack.

    4  When the entire program is executed: 
       It pops the global EC out of the stack.

     For nested functions:
       The child EC is pushed on top of the parent EC.

     For infinite loop: 
       Call stack crashes as it is completely filled with 
       EC's and max memory is reached

I hope this was insightful! Let me know in the comments .

Don't forget to follow me!!! I will be explaining hoisting, scope, and closures in the upcoming posts using the stuff you learn here(execution context).