Build a Piano using Html, CSS and JavaScript
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:
Javascript
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(); }) }) |
HTML
<!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 > |
CSS
@import url ( 'https://fonts.googleapis.com/css2?family=Poppins&display=swap' ); 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: