JavaScript Drum Kit Using HTML, CSS, And JavaScript
Welcome to Code With Random blog. This blog teaches us how we create a Javascript Drum Kit. We use HTML, CSS, and JavaScript for the JavaScript Drum Kit. I hope you enjoy our blog so let’s start with a basic HTML structure for the Javascript Drum Kit.
The main concepts presented in the article are DOM, key events, and CSS animations. So by the end of this article, you would have not only understood how to add event listeners to buttons and keystrokes
Using HTML And CSS we present JavaScript Drum Kit Using HTML, CSS, And JavaScript projects with source code available for you to copy and paste directly into your own project.
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Javascript Drum Kit</title> <link rel="stylesheet" href="style1.css"> </head> <body> <h1>Sound Pad in Javascript</h1> <div class="keys"> <div data-key="65" class="key"><kbd>A</kbd><span class="sound">Clap</span></div> <div data-key="83" class="key"><kbd>S</kbd><span class="sound">Hi Hat</span></div> <div data-key="68" class="key"><kbd>D</kbd><span class="sound">Kick</span></div> <div data-key="70" class="key"><kbd>F</kbd><span class="sound">Open Hat</span></div> <div data-key="71" class="key"><kbd>G</kbd><span class="sound">Boom</span></div> <div data-key="72" class="key"><kbd>H</kbd><span class="sound">Ride</span></div> <div data-key="74" class="key"><kbd>J</kbd><span class="sound">Snare</span></div> <div data-key="75" class="key"><kbd>K</kbd><span class="sound">Tom</span></div> <div data-key="76" class="key"><kbd>L</kbd><span class="sound">Tink</span></div> </div> <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67723/clap.wav" data-key="83"></audio> <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67723/hihat.wav" data-key="68"></audio> <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67723/kick.wav" data-key="70"></audio> <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67723/openhat.wav" data-key="65"></audio> <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67723/boom.wav" data-key="71"></audio> <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67723/ride.wav" data-key="72"></audio> <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67723/snare.wav" data-key="74"></audio> <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67723/tom.wav" data-key="75"></audio> <audio src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67723/tink.wav" data-key="76"></audio> <script src="app.js"></script> </body> </html>
There is all the HTML code for the Javascript Drum Kit Now, you can see an output with a Javascript Drum Kit then we write javascript for the Javascript Drum Kit.
Output
CSS Code
@import url("https://fonts.googleapis.com/css?family=Bree+Serif"); body { font-family: "Bree Serif"; margin: 0; text-align: center; color: #fff; /* remove this later */ background-color: #1d1e22; } .keys { margin: 0 auto; max-width: 600px; overflow: hidden; cursor: pointer; } .key { width: 160px; height: 160px; margin: 20px; float: left; transition: all 0.07s; border-radius: 5px; background: rgb(240, 249, 255); background: radial-gradient( ellipse at center, rgba(240, 249, 255, 1) 0%, rgba(99, 99, 99, 1) 100% ); } .playing { box-shadow: 0 0 30px 0 rgba(255, 255, 255, 0.3); background: rgb(240, 249, 255); background: radial-gradient( ellipse at center, rgba(240, 249, 255, 1) 0%, rgba(0, 180, 227, 1) 100% ); } kbd { display: block; padding-top: 30px; font-size: 60px; color: transparent; text-shadow: 1px 1px 2px #fff; }
CSS Updated output
Create Gold Text Effect Using HTML And CSS
Javascript Code
window.addEventListener('keydown', playSound); // To add!!! // window.addEventListener('click', playSound); play sound on click function playSound(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`); const key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if (!audio) return; audio.currentTime = 0; audio.play(); key.classList.add('playing'); } function removeTransition(e) { if (e.propertyName !== 'box-shadow') return; this.classList.remove('playing'); } const keys = document.querySelectorAll('.key'); keys.forEach(key => key.addEventListener('transitionend', removeTransition));
Final output
50+ Html , Css &Javascript Projects With Source Code
Now that we have completed our javascript section, our updated output with javascript. Hope you like the Javascript Drum Kit. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you!
This post teaches us how to create a Javascript Drum Kit using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Thank You And Keep Learning!!!
Written by – Code With Random/Anki
Code By – oscicen