In this article, we will build a piano using HTML, CSS, and JavaScript. A piano is a musical instrument consisting of different keys that produce different sounds to create a sweet musical sound when used in a particular sequence. Similarly, a piano app also contains keys that produce different sounds once the user clicks on them and creates different sweet musical sounds with the feeling of playing a real piano.
Preview Image:
Project Structure:
NOTE: Please note that the sounds will not play on your local system until you haven’t downloaded the key sounds. As you can see in the above project structure, there is a KeySounds folder that contains all the key sounds and plays the respective sound for the pressed key.
Approach
- Create a folder with project name that contains all the rquired HTML, CSS, JavaScript files and the sounds folder.
- Structure the Piano and other heading on the web page using HTML tags like <ul>, <li>, <div> and headings.
- Style the piano keys which makes it look like the real piano using CSS styling.
- Now, use JavaScript to add the click event on every piano key and make it to play sound for the particular clicked key.
Example: The below example will explain you the use of HTML, CSS, and JavaScript to build a Piano:
const keys = document.querySelectorAll( '.piano-keys' );
// Creating a object of Audio with a default sound const pianoSound = new Audio( './KeySounds/key01.mp3' );
keys.forEach((key) => { key.addEventListener( 'click' , (e) => {
const clickedKey = e.target.dataset.list;
pianoSound.src = `./KeySounds/key${clickedKey}.mp3`;
pianoSound.play();
})
}) |
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >Piano Playing</ title >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< div class = "container" >
< div class = "intro-container" >
< h1 >
How to build a Piano using Html,
CSS and JavaScript
</ h1 >
< h3 >
This is a 24 Key Piano, Click any
piano key to play the sound.
</ h3 >
</ div >
< div class = "piano-container" >
< ul class = "piano-keys-list" >
< li class = "piano-keys white-key"
data-list = "01" >
</ li >
< li class = "piano-keys black-key"
data-list = "02" >
</ li >
< li class = "piano-keys white-key"
data-list = "03" >
</ li >
< li class = "piano-keys black-key"
data-list = "04" >
</ li >
< li class = "piano-keys white-key"
data-list = "05" >
</ li >
< li class = "piano-keys black-key"
data-list = "06" >
</ li >
< li class = "piano-keys white-key"
data-list = "07" >
</ li >
< li class = "piano-keys white-key"
data-list = "08" >
</ li >
< li class = "piano-keys black-key"
data-list = "09" >
</ li >
< li class = "piano-keys white-key"
data-list = "10" >
</ li >
< li class = "piano-keys black-key"
data-list = "11" >
</ li >
< li class = "piano-keys white-key"
data-list = "12" >
</ li >
< li class = "piano-keys white-key"
data-list = "13" >
</ li >
< li class = "piano-keys black-key"
data-list = "14" >
</ li >
< li class = "piano-keys white-key"
data-list = "15" >
</ li >
< li class = "piano-keys black-key"
data-list = "16" >
</ li >
< li class = "piano-keys white-key"
data-list = "17" >
</ li >
< li class = "piano-keys black-key"
data-list = "18" >
</ li >
< li class = "piano-keys white-key"
data-list = "19" >
</ li >
< li class = "piano-keys white-key"
data-list = "20" >
</ li >
< li class = "piano-keys black-key"
data-list = "21" >
</ li >
< li class = "piano-keys white-key"
data-list = "22" >
</ li >
< li class = "piano-keys black-key"
data-list = "23" >
</ li >
< li class = "piano-keys white-key"
data-list = "24" >
</ li >
</ ul >
</ div >
</ div >
< script src = "script.js" ></ script >
</ body >
</ html >
|
@import url (
body { margin : 0 ;
padding : 0 ;
box-sizing: border-box;
font-family : "Poppins" , sans-serif ;
} .container { background-image :
linear-gradient( 90 deg, #9331d4 , rgb ( 239 5 92 / 70% ));
height : 100 vh;
width : 100% ;
display : flex;
flex- direction : column;
align-items: center ;
justify- content : center ;
} .intro-container { color : #fff ;
text-align : center ;
} .piano-container { display : flex;
align-items: center ;
justify- content : center ;
} .piano-keys-list { list-style : none ;
display : flex;
justify- content : center ;
} .piano-keys { width : 5 rem;
cursor : pointer ;
position : relative ;
height : 20 rem;
border-radius: 10px ;
border : 1px solid #000 ;
} .white-key { background-color : #fff ;
} .black-key { width : 2 rem;
height : 13 rem;
border-radius: 5px ;
border-top-left-radius: 0 ;
border-top-right-radius: 0 ;
background-color : #000 ;
z-index : 2 ;
margin : 0 -20px 0 -20px ;
} @media screen and ( min-width : 821px ) and ( max-width : 1024px ) {
.piano-keys {
width : 4 rem;
cursor : pointer ;
position : relative ;
height : 20 rem;
border-radius: 10px ;
border : 1px solid #000 ;
}
.black-key {
width : 2 rem;
height : 13 rem;
border-radius: 5px ;
border-top-left-radius: 0 ;
border-top-right-radius: 0 ;
background-color : #000 ;
z-index : 2 ;
margin : 0 -20px 0 -20px ;
}
} @media screen and ( min-width : 768px ) and ( max-width : 820px ) {
.piano-keys {
width : 3.5 rem;
cursor : pointer ;
position : relative ;
height : 16 rem;
border-radius: 10px ;
border : 1px solid #000 ;
}
.black-key {
width : 1.8 rem;
height : 10 rem;
border-radius: 5px ;
border-top-left-radius: 0 ;
border-top-right-radius: 0 ;
background-color : #000 ;
z-index : 2 ;
margin : 0 -20px 0 -20px ;
}
} @media screen and ( max-width : 576px ) {
.piano-container {
width : 90% ;
display : flex;
align-items: center ;
justify- content : flex-start;
overflow : auto ;
}
.piano-keys {
width : 3.5 rem;
cursor : pointer ;
position : relative ;
height : 16 rem;
border-radius: 10px ;
border : 1px solid #000 ;
}
.black-key {
width : 1.8 rem;
height : 10 rem;
border-radius: 5px ;
border-top-left-radius: 0 ;
border-top-right-radius: 0 ;
background-color : #000 ;
z-index : 2 ;
margin : 0 -20px 0 -20px ;
}
} |
Output: