Piano - HTML, CSS, JavaScript

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);
}

Blog

Piano - HTML, CSS, JavaScript

ManabJB

Join Our Newsletter. No Spam, Only the good stuff.

Related