Introduction:
On this weblog submit, we’ll discover ways to create a Playable Piano utilizing HTML, CSS, and JavaScript. This interactive undertaking permits customers to play piano notes with a easy click on, making it a enjoyable and fascinating expertise for music fans and learners alike. By the tip of this tutorial, you’ll have a completely useful digital piano that may be simply custom-made and built-in into your individual tasks.
Issues You Will Study:
- Making a easy HTML construction to put the muse for the digital piano.
- Styling the piano keys utilizing CSS to differentiate between black and white keys.
- Implementing JavaScript performance to play audio when a secret is clicked.
- Organizing undertaking recordsdata for straightforward administration and upkeep.
Video Tutorial:
Earlier than we dive into the tutorial, make sure you try the video model of this tutorial on my YouTube channel. It offers a step-by-step visible information to constructing the digital piano, making it even simpler to observe alongside.
Challenge Folder Construction:
Let’s arrange the undertaking folder construction earlier than we begin:
- index.html
- type.css
- script.js
- audio/key recordsdata
HTML:
Start by creating the index.html file and arrange the essential construction:
<!DOCTYPE html>
<html lang="en">
<head>
<meta identify="viewport" content material="width=device-width, initial-scale=1.0" />
<title>Playable Piano</title>
<hyperlink rel="stylesheet" href="https://style-tricks.com/codingcss/type.css" />
</head>
<physique>
<div class="piano-container"></div>
<script src="script.js"></script>
</physique>
</html>
CSS:
Subsequent, let’s add some fundamental CSS to type the piano keys:
physique {
padding: 0;
margin: 0;
background-color: #2887e3;
}
.piano-container {
show: flex;
place: absolute;
remodel: translate(-50%, -50%);
left: 50%;
high: 50%;
padding: 4em 1em 1em 1em;
border-radius: 0.62em;
background-color: #24272e;
box-shadow: 0 2em 4em rgba(7, 0, 53, 0.25);
}
.white-key {
width: 4.37em;
peak: 17.5em;
background-color: #ffffff;
border-radius: 0 0 0.3em 0.3em;
border: 2px stable #24272e;
box-sizing: border-box;
cursor: pointer;
}
.white-key:hover {
background-color: #ebebeb;
}
.black-key {
width: 2.5em;
peak: 10em;
border-radius: 0 0 0.3em 0.3em;
box-sizing: border-box;
place: absolute;
background-color: #070a0f;
cursor: pointer;
}
.black-key:hover {
background-color: #24272e;
}
.black-key:nth-child(1) {
left: 4em;
}
.black-key:nth-child(2) {
left: 8.37em;
}
.black-key:nth-child(3) {
left: 17.12em;
}
.black-key:nth-child(4) {
left: 21.5em;
}
.black-key:nth-child(5) {
left: 25.87em;
}
.black-key:nth-child(6) {
left: 34.62em;
}
.black-key:nth-child(7) {
left: 39em;
}
.black-key:nth-child(8) {
left: 47.75em;
}
.black-key:nth-child(9) {
left: 52.12em;
}
.black-key:nth-child(10) {
left: 56.5em;
}
@media display screen and (max-width: 1000px) {
.piano-container {
font-size: 0.7em;
}
}
@media display screen and (max-width: 700px) {
.piano-container {
font-size: 0.5em;
}
}
@media display screen and (max-width: 500px) {
.piano-container {
font-size: 0.3em;
}
}
JS:
Lastly, let’s add the JavaScript code to make the piano interactive:
let pianoContainer = doc.getElementsByClassName("piano-container");
const base = "./audio/";
window.onload = () => {
//24keys
for (let index = 1; index <= 24; index++) {
let div = doc.createElement("div");
div.classList.add("key", index <= 10 ? "black-key" : "white-key");
//For taking part in audio on click on
const quantity = index <= 9 ? "0" + index : index;
div.addEventListener("click on", () => {
new Audio(`${base}key${quantity}.mp3`).play();
});
pianoContainer[0].appendChild(div);
}
};
Conclusion:
Congratulations! You have got efficiently created a virtual piano using HTML, CSS, and JavaScript. This interactive undertaking permits customers to play piano notes by clicking on the keys, offering an attractive musical expertise. You’ll be able to additional customise and increase this undertaking by including further options comparable to recording performance or MIDI assist. I hope you loved this tutorial, and be happy to experiment and improve the digital piano to make it uniquely yours! Completely happy coding!
