• ;
  • A Coding Boy
  • Blog
  • Videos
  • Projects
  • Home
HTML AND CSS
LOGIN PAGE
WEBSITE DESGIN
API PROJECTS
CARD DESGIN
JAVASCRIPTS GAMES
JAVASCRIPT PROJECTS
JAVA PROJECTS
PYTHON PROJECTS
demo post
only for demo nasa prospect
only for demo the gonnies
most popular
how to create parallax website
how to create a beautiful card
how to create a netflix login page
how to create flipping ui card
how to create image generator website
Build A Playable PIANO in HTML CSS & JavaScript
Using JavaScript to build a playable piano can be a fun and challenging way to learn and improve your coding skills. This blog will teach you How to Make A Virtual Playable PIANO in HTML, CSS, and JavaScript from scratch that can be played directly in a web browser.
If you don’t know, a piano is a musical instrument that produces sound by striking a series of keys or notes on a keyboard. On my piano, users can play various tunes by clicking on the keys or using the keyboard keys. They can also adjust the volume and show or hide shortcut keys on the piano.
Steps to Build A Playable PIANO in JavaScript
To build a playable virtual piano using HTML, CSS, and JavaScript, follow the given steps line by line:
1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
2. Create an index.html file. The file name must be index and its extension .html
3. Create a style.css file. The file name must be style and its extension .css
4. Create a script.js file. The file name must be script and its extension .js
First, paste the following codes into your index.html file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Playable Piano JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" defer></script>
</head>
<body>
<div class="wrapper">
<header>
<h2>Playable PIANO</h2>
<div class="column volume-slider">
<span>Volume</span><input type="range" min="0" max="1" value="0.5" step="any">
</div>
<div class="column keys-checkbox">
<span>Show Keys</span><input type="checkbox" checked>
</div>
</header>
<ul class="piano-keys">
<li class="key white" data-key="a"><span>a</span></li>
<li class="key black" data-key="w"><span>w</span></li>
<li class="key white" data-key="s"><span>s</span></li>
<li class="key black" data-key="e"><span>e</span></li>
<li class="key white" data-key="d"><span>d</span></li>
<li class="key white" data-key="f"><span>f</span></li>
<li class="key black" data-key="t"><span>t</span></li>
<li class="key white" data-key="g"><span>g</span></li>
<li class="key black" data-key="y"><span>y</span></li>
<li class="key white" data-key="h"><span>h</span></li>
<li class="key black" data-key="u"><span>u</span></li>
<li class="key white" data-key="j"><span>j</span></li>
<li class="key white" data-key="k"><span>k</span></li>
<li class="key black" data-key="o"><span>o</span></li>
<li class="key white" data-key="l"><span>l</span></li>
<li class="key black" data-key="p"><span>p</span></li>
<li class="key white" data-key=";"><span>;</span></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html> <!-- Coding By CodingNepal - youtube.com/codingnepal --> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Playable Piano JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="script.js" defer></script> </head> <body> <div class="wrapper"> <header> <h2>Playable PIANO</h2> <div class="column volume-slider"> <span>Volume</span><input type="range" min="0" max="1" value="0.5" step="any"> </div> <div class="column keys-checkbox"> <span>Show Keys</span><input type="checkbox" checked> </div> </header> <ul class="piano-keys"> <li class="key white" data-key="a"><span>a</span></li> <li class="key black" data-key="w"><span>w</span></li> <li class="key white" data-key="s"><span>s</span></li> <li class="key black" data-key="e"><span>e</span></li> <li class="key white" data-key="d"><span>d</span></li> <li class="key white" data-key="f"><span>f</span></li> <li class="key black" data-key="t"><span>t</span></li> <li class="key white" data-key="g"><span>g</span></li> <li class="key black" data-key="y"><span>y</span></li> <li class="key white" data-key="h"><span>h</span></li> <li class="key black" data-key="u"><span>u</span></li> <li class="key white" data-key="j"><span>j</span></li> <li class="key white" data-key="k"><span>k</span></li> <li class="key black" data-key="o"><span>o</span></li> <li class="key white" data-key="l"><span>l</span></li> <li class="key black" data-key="p"><span>p</span></li> <li class="key white" data-key=";"><span>;</span></li> </ul> </div> </body> </html>
Second, paste the following codes into your style.css file
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #E3F2FD;
}
.wrapper {
padding: 35px 40px;
border-radius: 20px;
background: #141414;
}
.wrapper header {
display: flex;
color: #B2B2B2;
align-items: center;
justify-content: space-between;
}
header h2 {
font-size: 1.6rem;
}
header .column {
display: flex;
align-items: center;
}
header span {
font-weight: 500;
margin-right: 15px;
font-size: 1.19rem;
}
header input {
outline: none;
border-radius: 30px;
}
.volume-slider input {
accent-color: #fff;
}
.keys-checkbox input {
height: 30px;
width: 60px;
cursor: pointer;
appearance: none;
position: relative;
background: #4B4B4B
}
.keys-checkbox input::before {
content: "";
position: absolute;
top: 50%;
left: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #8c8c8c;
transform: translateY(-50%);
transition: all 0.3s ease;
}
.keys-checkbox input:checked::before {
left: 35px;
background: #fff;
}
.piano-keys {
display: flex;
list-style: none;
margin-top: 40px;
}
.piano-keys .key {
cursor: pointer;
user-select: none;
position: relative;
text-transform: uppercase;
}
.piano-keys .black {
z-index: 2;
width: 44px;
height: 140px;
margin: 0 -22px 0 -22px;
border-radius: 0 0 5px 5px;
background: linear-gradient(#333, #000);
}
.piano-keys .black.active {
box-shadow: inset -5px -10px 10px rgba(255,255,255,0.1);
background:linear-gradient(to bottom, #000, #434343);
}
.piano-keys .white {
height: 230px;
width: 70px;
border-radius: 8px;
border: 1px solid #000;
background: linear-gradient(#fff 96%, #eee 4%);
}
.piano-keys .white.active {
box-shadow: inset -5px 5px 20px rgba(0,0,0,0.2);
background:linear-gradient(to bottom, #fff 0%, #eee 100%);
}
.piano-keys .key span {
position: absolute;
bottom: 20px;
width: 100%;
color: #A2A2A2;
font-size: 1.13rem;
text-align: center;
}
.piano-keys .key.hide span {
display: none;
}
.piano-keys .black span {
bottom: 13px;
color: #888888;
}
@media screen and (max-width: 815px) {
.wrapper {
padding: 25px;
}
header {
flex-direction: column;
}
header :where(h2, .column) {
margin-bottom: 13px;
}
.volume-slider input {
max-width: 100px;
}
.piano-keys {
margin-top: 20px;
}
.piano-keys .key:where(:nth-child(9), :nth-child(10)) {
display: none;
}
.piano-keys .black {
height: 100px;
width: 40px;
margin: 0 -20px 0 -20px;
}
.piano-keys .white {
height: 180px;
width: 60px;
}
}
@media screen and (max-width: 615px) {
.piano-keys .key:nth-child(13),
.piano-keys .key:nth-child(14),
.piano-keys .key:nth-child(15),
.piano-keys .key:nth-child(16),
.piano-keys .key :nth-child(17) {
display: none;
}
.piano-keys .white {
width: 50px;
}
}
/* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #E3F2FD; } .wrapper { padding: 35px 40px; border-radius: 20px; background: #141414; } .wrapper header { display: flex; color: #B2B2B2; align-items: center; justify-content: space-between; } header h2 { font-size: 1.6rem; } header .column { display: flex; align-items: center; } header span { font-weight: 500; margin-right: 15px; font-size: 1.19rem; } header input { outline: none; border-radius: 30px; } .volume-slider input { accent-color: #fff; } .keys-checkbox input { height: 30px; width: 60px; cursor: pointer; appearance: none; position: relative; background: #4B4B4B } .keys-checkbox input::before { content: ""; position: absolute; top: 50%; left: 5px; width: 20px; height: 20px; border-radius: 50%; background: #8c8c8c; transform: translateY(-50%); transition: all 0.3s ease; } .keys-checkbox input:checked::before { left: 35px; background: #fff; } .piano-keys { display: flex; list-style: none; margin-top: 40px; } .piano-keys .key { cursor: pointer; user-select: none; position: relative; text-transform: uppercase; } .piano-keys .black { z-index: 2; width: 44px; height: 140px; margin: 0 -22px 0 -22px; border-radius: 0 0 5px 5px; background: linear-gradient(#333, #000); } .piano-keys .black.active { box-shadow: inset -5px -10px 10px rgba(255,255,255,0.1); background:linear-gradient(to bottom, #000, #434343); } .piano-keys .white { height: 230px; width: 70px; border-radius: 8px; border: 1px solid #000; background: linear-gradient(#fff 96%, #eee 4%); } .piano-keys .white.active { box-shadow: inset -5px 5px 20px rgba(0,0,0,0.2); background:linear-gradient(to bottom, #fff 0%, #eee 100%); } .piano-keys .key span { position: absolute; bottom: 20px; width: 100%; color: #A2A2A2; font-size: 1.13rem; text-align: center; } .piano-keys .key.hide span { display: none; } .piano-keys .black span { bottom: 13px; color: #888888; } @media screen and (max-width: 815px) { .wrapper { padding: 25px; } header { flex-direction: column; } header :where(h2, .column) { margin-bottom: 13px; } .volume-slider input { max-width: 100px; } .piano-keys { margin-top: 20px; } .piano-keys .key:where(:nth-child(9), :nth-child(10)) { display: none; } .piano-keys .black { height: 100px; width: 40px; margin: 0 -20px 0 -20px; } .piano-keys .white { height: 180px; width: 60px; } } @media screen and (max-width: 615px) { .piano-keys .key:nth-child(13), .piano-keys .key:nth-child(14), .piano-keys .key:nth-child(15), .piano-keys .key:nth-child(16), .piano-keys .key :nth-child(17) { display: none; } .piano-keys .white { width: 50px; } }
Last, paste the following codes into your script.js file.
Plain text
Copy to clipboard
Open in new window
EnlighterJS 3 Syntax Highlighter
const pianoKeys = document.querySelectorAll(".piano-keys .key"),
volumeSlider = document.querySelector(".volume-slider input"),
keysCheckbox = document.querySelector(".keys-checkbox input");
let allKeys = [],
audio = new Audio(`tunes/a.wav`); // by default, audio src is "a" tune
const playTune = (key) => {
audio.src = `tunes/${key}.wav`; // passing audio src based on key pressed
audio.play(); // playing audio
const clickedKey = document.querySelector(`[data-key="${key}"]`); // getting clicked key element
clickedKey.classList.add("active"); // adding active class to the clicked key element
setTimeout(() => { // removing active class after 150 ms from the clicked key element
clickedKey.classList.remove("active");
}, 150);
}
pianoKeys.forEach(key => {
allKeys.push(key.dataset.key); // adding data-key value to the allKeys array
// calling playTune function with passing data-key value as an argument
key.addEventListener("click", () => playTune(key.dataset.key));
});
const handleVolume = (e) => {
audio.volume = e.target.value; // passing the range slider value as an audio volume
}
const showHideKeys = () => {
// toggling hide class from each key on the checkbox click
pianoKeys.forEach(key => key.classList.toggle("hide"));
}
const pressedKey = (e) => {
// if the pressed key is in the allKeys array, only call the playTune function
if(allKeys.includes(e.key)) playTune(e.key);
}
keysCheckbox.addEventListener("click", showHideKeys);
volumeSlider.addEventListener("input", handleVolume);
document.addEventListener("keydown", pressedKey);
const pianoKeys = document.querySelectorAll(".piano-keys .key"), volumeSlider = document.querySelector(".volume-slider input"), keysCheckbox = document.querySelector(".keys-checkbox input"); let allKeys = [], audio = new Audio(`tunes/a.wav`); // by default, audio src is "a" tune const playTune = (key) => { audio.src = `tunes/${key}.wav`; // passing audio src based on key pressed audio.play(); // playing audio const clickedKey = document.querySelector(`[data-key="${key}"]`); // getting clicked key element clickedKey.classList.add("active"); // adding active class to the clicked key element setTimeout(() => { // removing active class after 150 ms from the clicked key element clickedKey.classList.remove("active"); }, 150); } pianoKeys.forEach(key => { allKeys.push(key.dataset.key); // adding data-key value to the allKeys array // calling playTune function with passing data-key value as an argument key.addEventListener("click", () => playTune(key.dataset.key)); }); const handleVolume = (e) => { audio.volume = e.target.value; // passing the range slider value as an audio volume } const showHideKeys = () => { // toggling hide class from each key on the checkbox click pianoKeys.forEach(key => key.classList.toggle("hide")); } const pressedKey = (e) => { // if the pressed key is in the allKeys array, only call the playTune function if(allKeys.includes(e.key)) playTune(e.key); } keysCheckbox.addEventListener("click", showHideKeys); volumeSlider.addEventListener("input", handleVolume); document.addEventListener("keydown", pressedKey);
That’s all; now you’ve successfully Build A Playable PIANO in HTML, CSS, and JavaScript. If you encounter any problems or your code is not working as expected, you can download the source code files for this PIANO by clicking on the given download button. It’s free, and a zip file will be downloaded that contains the project folder with source code files.
live demo
Download files
Info
Home
Projects
Blogs
Videos
About us
Follow us for more!
© 2023 All Rights Reserved A Coding Boy

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}