Piano - HTML, CSS, JavaScript

#webdev #javascript #programming #tutorial

Hello friends I will show you how you can create a simple piano using HTML, CSS and JavaScript

Check out the whole project here https://devinfo.w3spaces.com/piano/index.html

This is the final look

lets get into the code

this is HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="header">
            <p>Piano</p>
        </div>
        <div class="contents">
            <div class="key" onclick="generate_sound(1)">
                <p>A</p>
            </div>
            <div class="keyup" onclick="generate_sound(2)">
            </div>
            <div class="key" onclick="generate_sound(3)">
                <p>B</p>
            </div>
            <div class="keyup" onclick="generate_sound(4)">
            </div>
            <div class="key" onclick="generate_sound(5)">
                <p>C</p>
            </div>
            <div class="keyup" onclick="generate_sound(6)">
            </div>
            <div class="key" onclick="generate_sound(7)">
                <p>D</p>
            </div>
            <div class="keyup" onclick="generate_sound(8)">
            </div>
            <div class="key" onclick="generate_sound(9)">
                <p>E</p>
            </div>
            <div class="keyup" onclick="generate_sound(10)">
            </div>
            <div class="key keyend" onclick="generate_sound(11)">
                <p>F</p>
            </div>
            <div class="keyup keyupend" onclick="generate_sound(12)">
            </div>
        </div>
    </div>
<script src="script.js"></script>
</body>
</html>

this is style.css

        body{
            background-color: black;
        }
        .main{
            display: flex;
            height: 100vh;
            background-color: black;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .header{
            height: 50px;
            width: 90%;
            background-color: rgb(65, 65, 65);
            color: aliceblue;
            margin: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            border: 1px solid #ffff;
        }
        .header p{
            font-size: 1.5rem;
        }
        .screen{
            background-color: rgb(44, 44, 44);
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ffff;
            height: 50px;
            width: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .screen p{
            font-size: .8rem;
        }
        .contents{
            height: 150px;
            width: 90%;
            background-color: rgb(168, 168, 168);
            margin: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
            border: 1px solid #ffff;
        }
        .key{
            background-color: aliceblue;
            height: 70px;
            width: 40px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: end;        
        }
        .key p{
            margin-bottom: 5px;
        }
        .keyend{
            width: 35px;
        }
        .key:hover{
            background-color: rgb(255, 145, 0); 
        }
        .keyup{
            background-color: black;
            height: 35px;
            width: 15px;
            margin-top: -35px;
            margin-left: -20px;
            z-index: 2;
        }
        .keyupend{
            margin-left: -15px;
        }
        .keyup:hover{
            background-color: rgb(95, 95, 95);
        }

This is script.js

var sounds= [280,300,320,340,360,380,400,420,440,460,480,500,520];

var context =
new (window.AudioContext ||  window.webkitAudioContext)();

function generate_sound(nota){
var osc = context.createOscillator();
osc.type = 'square';
osc.frequency.value=sounds[nota];
osc.connect(context.destination);
osc.start();
osc.stop(context.currentTime + .3);
}

Top comments (6)

devkoustav • Oct 30 '22

Absolutely excellent work! 👍🏻

But I was having this problem - i was using my phone for the demo and while clicking the keys the text used to get selected and the suggestion from Google would come from below.

You may think of using user-select: none; for the class keyup
Also :active would make it look much better in big screens!