This content originally appeared on DEV Community and was authored by Kumar Kalyan
Intro
Every one of us must have played with the guitar app or the drumstick app once in our life and believe me, I used to love it. When I was a kid I used to think about how can I build my drumstick app so that I can add customizations, more tunes, and a nice background of my choice, and today I have made my drumstick app using javascript just with a few lines of code.
In this article, I will demonstrate how you can build your javascript drumstick app just using HTML, CSS, and javascript and I can guarantee you can also customize it on your own.
Getting started
Building this webpage you will learn some core Javascript and dom manipulation concepts like event listener, audio, class lists, and array. form, etc. Don't worry if you are new to Javascript I will explain every single topic concisely with proper demos. SO let's jump onto build an amazing micro project.
Building the sturucture
We all know that building a website consists of three blocks of HTML for the structure, which contains all the key elements that will be present in our webpage like the images, paragraphs, headings, etc. As you can imagine a drumstick will contain some keys or buttons so
Let's add the keys
<div class="keys">
<div data-key="65" class="key">
<kdb>A</kdb>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kdb>B</kdb>
<span class="sound">hithat</span>
</div>
<div data-key="68" class="key">
<kdb>D</kdb>
<span class="sound">kick</span>
</div>
<div data-key="70" class="key">
<kdb>F</kdb>
<span class="sound">openhat</span>
</div>
<div data-key="71" class="key">
<kdb>G</kdb>
<span class="sound">boom</span>
</div>
<div data-key="72" class="key">
<kdb>H</kdb>
<span class="sound">ride</span>
</div>
<div data-key="74" class="key">
<kdb>J</kdb>
<span class="sound">snare</span>
</div>
<div data-key="75" class="key">
<kdb>K</kdb>
<span class="sound">tom</sapn>
</div>
<div data-key="76" class="key">
<kdb>L</kdb>
<span class="sound">tink</span>
</div>
</div>
So here I am adding all keys within a div having a class of keys so that we can align all the keys together and have a defined separate div with a class key for showing the particular key. Here you can all see something like data-key this is an attribute used for storing custom data that is private to page-like variables and here I am storing the key codes which are ASCII Codes. To know more about the data- attribute checks out here. Also, you can see that I have used <kdb> which is used for defining keys in Html, and lastly a <span> for defining the audio associated with a key.
Let's check how our webpage looks like now
Since we have added the keys so now let's add the sounds. Make sure you create a folder named sounds in the root directory and add all the sounds there. You can download the sounds from my sandbox or you can add your own from sound cloud.
<audio data-key="65" src="./sounds/clap.wav"></audio>
<audio data-key="83" src="./sounds/hihat.wav"></audio>
<audio data-key="68" src="./sounds/kick.wav"></audio>
<audio data-key="70" src="./sounds/openhat.wav"></audio>
<audio data-key="71" src="./sounds/boom.wav"></audio>
<audio data-key="72" src="./sounds/ride.wav"></audio>
<audio data-key="74" src="./sounds/snare.wav"></audio>
<audio data-key="75" src="./sounds/tom.wav"></audio>
<audio data-key="76" src="./sounds/tink.wav"></audio>
Here also you can see that I have stored the keycodes inside the data-key attribute so that we can play the particular sound which is associated with the key using the keycode.
Adding the styles
Now we have added the structure so now it's time for the Styles. CSS helps us to add styles to our Html page like how will it look, adding a font or resizing the image ,etc. Now First let us align the keys and make them look good.
.keys {
display: flex;
justify-content: center;
margin-top: 50vh;
}
.key {
margin: 10px;
border: 5px solid #f2d5e7;
border-radius: 10px;
display: grid;
padding: 15px;
transition: all 0.07s ease;
font-size: 25px;
font-weight: 600;
color: rgb(95, 102, 3);
font-family: "Courier New", Courier, monospace;
}
span.sound {
font-size: 15px;
text-transform: uppercase;
margin-top: 2px;
color: white;
}
Paste this piece of code and see the magic. So now let's understand the above code. To align all the keys in a row I set the display of .keys to flex, then used justify-content to bring all of them to the center, and finally added a margin at the top to bring the keys to the center of the screen.
To make each key look like a button I have added a border to make a box-like structure followed by a border-radius for adding curves then some margin for adding some space between each key and some padding for adding space inside the key. I have also changed the font-family and increased the size. The most important thing here is the grid display which aligns all the elements inside a div like a column. Lastly added transition properties to add some animations and this will ease out the buttons on clicked.
Now lets add some another piece of css one for the backgrund and one for the when the keys will be pressed
body {
background: url("https://images.pexels.com/photos/1105666/pexels-photo-1105666.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
}
.playing {
transform: scale(1.1);
border-color: #f30aad;
box-shadow: 0 0 1rem #dbadcd;
}
For the background simply grab one from Unsplash or pixels. Here you might be wondering that we haven't added any class named playing in our HTML file, so why I have defined it? Well, there it comes Javascript. To add some cool animations when a key is pressed will dynamically add this class to our key element.
Now it looks a bit like this .
Playing the sounds and use of functions
Talking about functions they are a code block with a name and some set of instructions. It only executes will be called. Let's understand this with an example suppose you have been given the responsibility of going to the market and buying some fruits and you will only do this when you will be asked by your mother. Similarly, if I define a function like say hello world and define to log HelloWorld so this will only execute when HelloWorld will be called. Let's return to our drumstick we need two functions one for playing the audio and another for add the css.
function removeTransition(e){
if (e.propertyName != "transform") return;
e.target.classList.remove('playing');
}
function playSound(e){
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (!audio) return;
key.classList.add('playing');
audio.currentTime = 0;
audio.play();
}
const keys =Array.from(document.querySelectorAll('.key'))
keys.forEach(key=>key.addEventListener('transitionend',removeTransition))
window.addEventListener('keydown', playSound);
Here the playSound function takes the event as an argument that will be passed on keydown which means only executed when a key is pressed. Here using the keyCode property from the event object we are grabbing the audio and the key this is the reason why I have used the data-key attribute. Now if the audio is null which is only possible when a different key is pressed other than defined we will do nothing but if the defined keys are pressed then we will first add the playing class to the key which will add the extra CSS animation then will set the audio time to 0 and finally will play the audio. Similarly, the remove transition function also uses the event object and checks for the key has a transform property or not, and if yes then it removes the playing class. Lastly, we are grabbing all the keys and separating them using Array. from and removing the transition after the sound is played
The final code
Conclusion
Congratuations you just learned to create your own Drumstick using JavaScript. Feel free to add customizations , style and more tunes while you make your own and make sure to tag me on twitter. If you love this article make to hit a reaction and share it with your peers. Sharing is absolutely free. Also if you have nay sort of quries drop in the comment section below.
Happy Coding!
Connect
This content originally appeared on DEV Community and was authored by Kumar Kalyan
Kumar Kalyan | Sciencx (2022-07-19T18:54:23+00:00) Construct a awesome JavaScript Drum stick in just 5 minutes. Retrieved from https://www.scien.cx/2022/07/19/construct-a-awesome-javascript-drum-stick-in-just-5-minutes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.