Javascript Drum Kit | Javascript Drum Kit using HTML CSS & Javascript







 Javascript drum kit | javascript drum machine | javascript drum kit using HTML CSS javascript








Welcome🎉 to Code With Random blog. In this blog, we learn how to create a javascript drum kit. We use HTML & CSS and javascript for this javascript drum kit. Hope you enjoy our blog so let’s start with a basic HTML structure for a javascript drum kit.

HTML code for drum kit 

 <main>  
<section class="main-wrapper">
<div class="key-map-wrapper">
<h2>Key Mapping</h2>
<ul class="key-map-list">
<li>
<kbd class="key-code">E</kbd>
<span class="key-sound">Crash</span>
</li>
<li>
<kbd class="key-code">R</kbd>
<span class="key-sound">Ride</span>
</li>
<li>
<kbd class="key-code">F</kbd>
<span class="key-sound">Floor tom</span>
</li>
<li>
<kbd class="key-code">G</kbd>
<span class="key-sound">Mid tom</span>
</li>
<li>
<kbd class="key-code">H</kbd>
<span class="key-sound">High tom</span>
</li>
<li>
<kbd class="key-code">V</kbd>
<kbd class="key-code">B</kbd>
<span class="key-sound">Kick</span>
</li>
<!-- -->
<li>
<kbd class="key-code">J</kbd>
<span class="key-sound">Snare</span>
</li>
<li>
<kbd class="key-code">I</kbd>
<span class="key-sound">Hi-Hat Open</span>
</li>
<li>
<kbd class="key-code">K</kbd>
<span class="key-sound">Hi-Hat Closed</span>
</li>
</ul>
</div>
<h1 class="main-title">JavaScript Drum Kit</h1>
<div class="drum-kit-wrapper">
<img id="crash-ride" class="crash-cymbal" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/img/crash.png" alt="Crash cymbal">
<img id="hihat-top" class="hihat-top-cymbal" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/img/hihat-top.png" alt="Hi Hat cymbal">
<div data-key="74" class="key snare">
<kbd>J</kbd>
</div>
<div data-key="66" class="key kick">
<kbd>B</kbd>
</div>
<!-- -->
<div data-key="86" class="key kick2">
<kbd>V</kbd>
</div>
<div data-key="72" class="key tom-high">
<kbd>H</kbd>
</div>
<div data-key="71" class="key tom-mid">
<kbd>G</kbd>
</div>
<div data-key="70" class="key tom-low">
<kbd>F</kbd>
</div>
<div data-key="69" class="key crash">
<kbd>E</kbd>
</div>
<div data-key="82" class="key ride">
<kbd>R</kbd>
</div>
<div data-key="73" class="key hihat-open">
<kbd>I</kbd>
</div>
<div data-key="75" class="key hihat-close">
<kbd>K</kbd>
</div>
<img class="drum-kit" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/img/drum-kit.png" alt="Drum Kit" />
</div>
</section>
</main>
<!-- -->
<audio data-key="74" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/snare.wav"></audio>
<audio data-key="66" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/kick.wav"></audio>
<audio data-key="86" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/kick.wav"></audio>
<audio data-key="72" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/tom-high.wav"></audio>
<audio data-key="71" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/tom-mid.wav"></audio>
<audio data-key="70" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/tom-low.wav"></audio>
<audio data-key="69" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/crash.wav"></audio>
<audio data-key="82" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/ride.wav"></audio>
<audio data-key="73" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/hihat-open.wav"></audio>
<audio data-key="75" src="https://raw.githubusercontent.com/ArunMichaelDsouza/javascript-30-course/master/src/01-javascript-drum-kit/sounds/hihat-close.wav"></audio>

There is all HTML code for the drum kit. Now, you can see output without CSS, then we write CSS for our drum kit.

output

javascript drum kit | javascript drum machine | javascript drum kit using html css javascript

javascript drum kit | javascript drum machine | javascript drum kit using html css javascript

CSS for drum kit

 @import url(https://fonts.googleapis.com/css?family=Handlee|Pacifico);  
html,
body {
padding: 0;
margin: 0;
background-color: #fff;
}
.main-wrapper {
margin: 30px auto 0;
width: 1080px;
text-align: center;
}
.main-title {
font-family: 'Pacifico', cursive;
text-align: center;
font-size: 3.2em;
color: #cb2026;
text-shadow: 1px 1px 1px #5a0b0d;
}
.drum-kit-wrapper {
position: relative;
width: 600px;
margin: -100px auto 0;
}
.drum-kit {
width: 100%;
height: 520px;
position: relative;
}
.crash-cymbal {
position: absolute;
top: 114px;
left: 80px;
transform: rotate(-7.2deg) scale(1.5);
transition: all ease-in-out .042s;
}
.hihat-top-cymbal {
position: absolute;
top: 166px;
right: 71px;
transform: scale(1.35);
z-index: 0;
transition: all ease-in-out .042s;
}
.key {
display: inline-block;
transition: all ease-in-out .042s;
position: absolute;
background: #eaeaea;
font-size: 1.5em;
height: 32px;
width: 32px;
text-align: center;
border-radius: 4px;
border: 3px solid #aaa;
color: #444;
box-shadow: 1px 1px 1px rgba(0,0,0,.65);
z-index: 2;
}
.key.kick {
top: 355px;
right: 250px;
}
.key.kick2 {
top: 355px;
right: 308px;
}
.key.snare {
right: 145px;
top: 280px;
}
.key.tom-high {
right: 227px;
top: 240px;
}
.key.tom-mid {
left: 222px;
top: 220px;
}
.key.tom-low {
top: 320px;
left: 133px;
}
.key.crash {
top: 80px;
left: 75px;
}
.key.ride {
left: 165px;
top: 87px;
}
.key.hihat-open {
right: 165px;
top: 144px;
}
.key.hihat-close {
right: 60px;
top: 150px;
}
.playing {
transform: scale(1.12);
}
.key-map-wrapper {
position: absolute;
right: 0;
top: 0;
height: 700px;
background: #111;
width: 250px;
z-index: 3;
}
.key-map-wrapper > h2 {
color: #fff;
font-family: 'Handlee', cursive;
margin-bottom: 35px;
border-bottom: 1px solid #fff;
padding-bottom: 20px;
}
.key-map-list {
list-style: none;
color: #fff;
text-align: left;
}
.key-map-list > li {
margin-bottom: 25px;
}
.key-code {
color: #444;
background-color: #eaeaea;
font-size: 1.25em;
padding: 5px 10px;
border-radius: 4px;
border: 3px solid #aaa;
}
.key-sound {
font-size: 1.2em;
margin-left: 10px;
font-family: 'Handlee', cursive;
vertical-align: middle;
}

Now we have completed our CSS section,  Here is our updated output CSS.

output

javascript drum kit CSS

Now add javascript for the play sound drum kit  !

Javascript for drum kit 

 {  
const playingClass = 'playing',
crashRide = document.getElementById('crash-ride'),
hiHatTop = document.getElementById('hihat-top');
const animateCrashOrRide = () => {
crashRide.style.transform = 'rotate(0deg) scale(1.5)';
};
const animateHiHatClosed = () => {
hiHatTop.style.top = '171px';
};
const playSound = e => {
const keyCode = e.keyCode,
keyElement = document.querySelector(`div[data-key="${keyCode}"]`);
if(!keyElement) return;
const audioElement = document.querySelector(`audio[data-key="${keyCode}"]`);
audioElement.currentTime = 0;
audioElement.play();
switch(keyCode) {
case 69:
case 82:
animateCrashOrRide();
break;
case 75:
animateHiHatClosed();
break;
}
keyElement.classList.add(playingClass);
};
const removeCrashRideTransition = e => {
if(e.propertyName !== 'transform') return;
e.target.style.transform = 'rotate(-7.2deg) scale(1.5)';
};
const removeHiHatTopTransition = e => {
if(e.propertyName !== 'top') return;
e.target.style.top = '166px';
};
const removeKeyTransition = e => {
if(e.propertyName !== 'transform') return;
e.target.classList.remove(playingClass)
};
const drumKeys = Array.from(document.querySelectorAll('.key'));
drumKeys.forEach(key => {
key.addEventListener('transitionend', removeKeyTransition);
});
crashRide.addEventListener('transitionend', removeCrashRideTransition);
hiHatTop.addEventListener('transitionend', removeHiHatTopTransition);
window.addEventListener('keydown', playSound);
}

Javascript project ideas with source code  by Code With Random

output

javascript drum kit | javascript drum machine | javascript drum kit using html css javascript

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the drum kit , you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕



In this post, we learn how to create a  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.

Written by – Code With Random/Anki 

Share on:

0 thoughts on “Javascript Drum Kit | Javascript Drum Kit using HTML CSS & Javascript”

Leave a Comment