Design a Drum-kit web app using JavaScript
Last Updated :
30 Jul, 2024
We all must have seen a drum kit in some concert or elsewhere, it is a collection of drums, cymbals and other percussion instruments. But have you ever imagined making that drum kit on your own virtually with the help of some scripting language? Well, so here we are with the goal for this article to build a drum kit app that runs in the browser. 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 so that you’ll know when the user is tapping on the keyboard or clicking on a particular button on your Website and you can respond to it, but you also end up with an awesome Website that you can impress all of your friends with.
Preview of the Website:
So the way this website would work that we’ve got a number of keys on the webpage that represents different drums in a typical drum set and when you click on any of those buttons then you’ll get the corresponding sound of the drum. And in addition you can also use the keys on the keyboard to have a sound effect.
Designing the HTML Layout: For the website, we only have seven buttons to display on the page, clicking upon which sound would be played. First we would add the DOCTYPE HTML format, then give a suitable title to the web page, in our case it is The Drum Kit . Inside the body tag, we would give a heading, say, The Drum Kit using h1 tag and display those seven buttons. The code for the same would be:
HTML
<!DOCTYPE html>
<html>
<head>
<title>The Drum Kit</title>
</head>
<body>
<h1>The Drum Kit</h1>
<div class="all">
<button>w</button>
<button>a</button>
<button>s</button>
<button>d</button>
<button>j</button>
<button>k</button>
<button>l</button>
</div>
</body>
</html>
Output would be something like that:
Adding CSS Styling: CSS is used to style the different portions and make it more visually appealing. But, this is a personal opinion as to which style does the developer like the most. Feel free to use any styling but keep these main points in your mind:
- Give whatever color, background color, font-family, margin and font size you want to give to the body and the heading.
- We have given background images of drums, cymbals, etc. to every button to make the page more attractive. All the images are in “images” directory. Additionally, we have given some common styling to all the buttons.
- We have also given styling as to how each button will look when pressed in the class animation. We would append this class using JavaScript whenever a button is pressed.
To append these classes we have to add the classes in HTML tags also and link the stylesheet. So the modified HTML and new CSS code would be:
HTML
<!DOCTYPE html>
<html>
<head>
<title>The Drum Kit</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>The Drum Kit</h1>
<div class="all">
<button class="w button">w</button>
<button class="a button">a</button>
<button class="s button">s</button>
<button class="d button">d</button>
<button class="j button">j</button>
<button class="k button">k</button>
<button class="l button">l</button>
</div>
</body>
</html>
body {
text-align: center;
background-color: #a06060;
}
h1 {
font-size: 5rem;
color: #DBEDF3;
font-family: cursive;
text-shadow: 3px 0 #DA0463;
}
.w {
background-image: url("images/w.png");
}
.a {
background-image: url("images/a.png");
}
.s {
background-image: url("images/s.png");
}
.d {
background-image: url("images/d.png");
}
.j {
background-image: url("images/j.png");
}
.k {
background-image: url("images/k.png");
}
.l {
background-image: url("images/l.png");
}
.all {
margin: 10% auto;
}
.animation {
box-shadow: 0 3px 4px 0 #DBEDF3;
opacity: 0.5;
}
.button {
outline: none;
border: 10px solid #404B69;
font-size: 5rem;
font-family: 'Arvo', cursive;
line-height: 2;
font-weight: 900;
color: #DA0463;
text-shadow: 3px 0 #DBEDF3;
border-radius: 15px;
display: inline-block;
width: 150px;
height: 150px;
text-align: center;
margin: 10px;
background-color: white;
}
Adding Functionality with JavaScript:
Important: Add script tag to the HTML document linking it with the JavaScript file (before closing the body tag).
HTML
<script src="drumKit.js"></script>
Add event listeners to all the buttons as follows:
JavaScript
var numberOfButtons = document.querySelectorAll(".button").length;
for (var j = 0; j < numberOfButtons; j++) {
document.querySelectorAll(".button")[j]
.addEventListener("click", function() {
var buttonStyle = this.innerHTML;
sound(buttonStyle);
animation(buttonStyle);
});
}
Add keypress function which will describe what will happen when a particular key is produced. Here we will produce the sound effect and animation effect. Code for the same is:
JavaScript
document.addEventListener("keypress", function(event) {
sound(event.key);
animation(event.key);
});
Now we will code sound() function. It will tell which sound should be played when we press or/and click a specific key. Here we have already stored some basic sound effects of drums, cymbals and other percussion instruments, and we will play those sounds (using new Audio) when their respective key is clicked or pressed. All the sounds are in “music” directory. Code for the same should be:
JavaScript
function sound(key) {
switch (key) {
case "w":
var sound1 = new Audio("music/w.mp3");
sound1.play();
break;
case "a":
var sound2 = new Audio("music/a.mp3");
sound2.play();
break;
case "s":
var sound3 = new Audio('music/s.mp3');
sound3.play();
break;
case "d":
var sound4 = new Audio('music/d.mp3');
sound4.play();
break;
case "j":
var sound5 = new Audio('music/j.mp3');
sound5.play();
break;
case "k":
var sound6 = new Audio('music/k.mp3');
sound6.play();
break;
case "l":
var sound7 = new Audio('music/l.mp3');
sound7.play();
break;
default: console.log(key);
}
}
Now we will code animation() function. This will animate the button differently when it is being clicked. To do this, we will add pressed (which we have already defined in CSS file) class to the respective button when it is being clicked. Code for the same would be:
JavaScript
function animation(currentKey) {
var activeButton = document.querySelector("." + currentKey);
activeButton.classList.add("animation");
setTimeout(function() {
activeButton.classList.remove("animation");
}, 100);
}
<!DOCTYPE html>
<html>
<head>
<title>The Drum Kit</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>The Drum Kit</h1>
<div class="all">
<button class="w button">w</button>
<button class="a button">a</button>
<button class="s button">s</button>
<button class="d button">d</button>
<button class="j button">j</button>
<button class="k button">k</button>
<button class="l button">l</button>
</div>
<script src="drumKit.js"></script>
</body>
</html>
var numberOfButtons =
document.querySelectorAll(".button").length;
for (var j = 0; j < numberOfButtons; j++) {
document.querySelectorAll(".button")[j]
.addEventListener("click", function() {
var buttonStyle = this.innerHTML;
sound(buttonStyle);
animation(buttonStyle);
});
}
document.addEventListener("keypress", function(event) {
sound(event.key);
animation(event.key);
});
function sound(key) {
switch (key) {
case "w":
var sound1 = new Audio("music/w.mp3");
sound1.play();
break;
case "a":
var sound2 = new Audio("music/a.mp3");
sound2.play();
break;
case "s":
var sound3 = new Audio('music/s.mp3');
sound3.play();
break;
case "d":
var sound4 = new Audio('music/d.mp3');
sound4.play();
break;
case "j":
var sound5 = new Audio('music/j.mp3');
sound5.play();
break;
case "k":
var sound6 = new Audio('music/k.mp3');
sound6.play();
break;
case "l":
var sound7 = new Audio('music/l.mp3');
sound7.play();
break;
default: console.log(key);
}
}
function animation(currentKey) {
var activeButton = document.querySelector("." + currentKey);
activeButton.classList.add("animation");
setTimeout(function() {
activeButton.classList.remove("animation");
}, 100);
}
Similar Reads
Pig Game Design using JavaScript
In this article, we will be explaining the steps and various logic required in making of the famous Pig Game, which is a virtual dice game. About Game: In this game, User Interface (UI) contains user/player that can do three things, they are as follows: There will be two players in this game. At the
11 min read
Build A Drawing App using JavaScript
A drawing app that lets us draw shapes like triangles, circles, and rectangles which can be made using HTML, CSS, and JavaScript. We'll also have a brush tool to paint our drawings. With the shapes, we can create different designs, and with the brush, we can color them. We'll include a filled checkb
8 min read
How to Design a Simple Calendar using JavaScript?
We will Create a calendar using HTML, CSS, and JavaScript that displays the current month and year, and allows the user to navigate to previous and next months. Also, it allows the user to jump to a specific month and year. The calendar should also highlight the current date. Prerequisites: HTMLCSSJ
5 min read
Create a Quiz Application Using JavaScript
In this article, we will learn how to create a quiz application using JavaScript. The quiz application will contain questions followed by a total score shown at the end of the quiz. The score will increase based on the correct answers given. Initially, there are only three questions, but you can inc
4 min read
Design a Survey Form using HTML CSS and JavaScript
In this article, we are going to implement a survey form using HTML, CSS, and JavaScript. In this form, we will get data about the interest of people in sports. In this implementation, the data will be stored in a CSV file after successful form validations. Preview of final output: Let us have a loo
5 min read
How to Create a Desktop App Using JavaScript?
Building a JavaScript desktop application is possible using various frameworks and technologies. One popular approach is to use Electron, which is an open-source framework developed by GitHub. Electron allows you to build cross-platform desktop applications using web technologies such as HTML, CSS,
2 min read
Design a Recipe App in HTML CSS & JavaScript
We will create an attractive and styled application that gives the recipe of food, and dishes entered by the user. The user needs to enter the required food name and click on the button. The application uses an External API to fetch the food recipe and represent it in an attractive form. The user ca
6 min read
Design a Stock Market Dashboard using HTML CSS & JavaScript
We will walk through the step-by-step process of designing a Stock Market Dashboard template using HTML, CSS, and JavaScript. This application will provide users with a dashboard interface where they can view a watchlist of stocks, search for specific stocks, and see detailed information about each
11 min read
Design a Tip Calculator using HTML, CSS and JavaScript
The tip is the money given as a gift for good service, to the person who serves you in a restaurant. In this project, a simple tip calculator is made which takes the billing amount, type of service, and the number of persons as input. As per the three inputs, it generates a tip for the serving perso
4 min read
Design a Simple Counter Using HTML CSS and JavaScript
Creating a counter application with click tracking is a great beginner-friendly project to enhance your understanding of JavaScript, HTML, and CSS. In this article, we will guide you through building a basic counter app where you can increment or decrement a value, track the number of clicks, and re
4 min read