Creating Javascript project helps to build up your skills and getting yourself more ready for a job.
Here is a javascript code for a piano but it can be manipulated to create your desired musical instrument or a basic music player or maybe anything.
First let us create a html file
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8">
<title>Lets piano</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Piano</h1>
<div class="set">
<button class="piano" id="pia">a</button>
<button class="piano">s</button>
<button class="piano" id="pia">d</button>
<button class="piano">f</button>
<button class="piano" id="pia">g</button>
<button class="piano">h</button>
<button class="piano" id="pia">j</button>
<button class="piano">k</button>
<button class="piano" id="pia">l</button>
</div>
<script src="index.js" charset="utf-8"></script>
<script type="text/javascript" src="content.js"></script>
</body>
</html>
Some styling to it
style.css
body {
text-align: center;
background-color: orange;
}
h1 {
font-size: 5rem;
}.piano {
font-family: sans-serif;
padding: 300px 60px;
color: black;
background-color: white;
cursor: pointer;
margin: 0px;
}
#pia{
font-family: sans-serif;
cursor: pointer;
padding: 300px 60px;
color: white;
background-color: black;
margin: 0px;
}
Now the javascript
index.js
var numberOfDrumButtons = document.querySelectorAll(".piano").length;
for (var i = 0; i < numberOfDrumButtons; i++) {
document.querySelectorAll(".piano")[i].addEventListener("click", function() {
var buttonInnerHTML = this.innerHTML;
makeSound(buttonInnerHTML);
});
}
document.addEventListener("keypress", function(event) {
makeSound(event.key);
});
function makeSound(key) {
switch (key) {
case "a":
var tom1 = new Audio("sounds/tom1.mp3");
tom1.play();
break;
case "s":
var tom2 = new Audio("sounds/tom2.mp3");
tom2.play();
break;
case "d":
var tom3 = new Audio('sounds/tom3.mp3');
tom3.play();
break;
case "f":
var tom4 = new Audio('sounds/tom4.mp3');
tom4.play();
break;
case "g":
var snare = new Audio('sounds/tom5.mp3');
snare.play();
break;
case "h":
var crash = new Audio('sounds/tom6.mp3');
crash.play();
break;
case "j":
var kick = new Audio('sounds/tom7.mp3');
kick.play();
break;
case "k":
var kick = new Audio('sounds/tom8.mp3');
kick.play();
break;
case "l":
var kick = new Audio('sounds/tom9.mp3');
kick.play();
break;
default: console.log(key);
}
}
Note: Sound of each key must be in the folder. you can also make your own extension. Learn how
