Build a Virtual Keyboard Piano Music in Browser Using HTML5 CSS3 and Javascript Full Project For Beginners

 

 

 

 

index.html

 

 

<head>
  <meta charset="UTF-8">
  <title>JS Piano</title>
  <link rel="stylesheet" href="piano-style.css">
</head>

<body>
  <div class="keys">
    <div data-key="65" class="white key">
      <kbd>A</kbd>
    </div>
    <div data-key="87" class="black key c-sharp sharp-pos-top">
      <kbd>W</kbd>
    </div>
    <div data-key="83" class="white key">
      <kbd>S</kbd>
    </div>
    <div data-key="69" class="black key d-sharp sharp-pos-top">
      <kbd>E</kbd>
    </div>
    <div data-key="68" class="white key">
      <kbd>D</kbd>
    </div>
    <div data-key="70" class="white key">
      <kbd>F</kbd>
    </div>
    <div data-key="84" class="black key sharp-pos-top">
      <kbd>T</kbd>
    </div>
    <div data-key="71" class="white key">
      <kbd>G</kbd>
    </div>
    <div data-key="89" class="black key g-sharp sharp-pos-top">
      <kbd>Y</kbd>
    </div>
    <div data-key="72" class="white key">
      <kbd>H</kbd>
    </div>
    <div data-key="85" class="black key a-sharp sharp-pos-top">
      <kbd>U</kbd>
    </div>
    <div data-key="74" class="white key">
      <kbd>J</kbd>
    </div>
    <div data-key="75" class="white key">
      <kbd>K</kbd>
    </div>
  </div>

  <audio preload="auto" data-key="65" src="https://www.dropbox.com/s/n5qnsrh08wopcn3/C4.wav?raw=1"></audio>
  <audio preload="auto" data-key="87" src="https://www.dropbox.com/s/mlvxp8dr5tqflru/CSharp4.wav?raw=1"></audio>
  <audio preload="auto" data-key="83" src="https://www.dropbox.com/s/v7c2e1dkohoehif/D4.wav?raw=1"></audio>
  <audio preload="auto" data-key="69" src="https://www.dropbox.com/s/rothtf17sznja4h/DSharp4.wav?raw=1"></audio>
  <audio preload="auto" data-key="68" src="https://www.dropbox.com/s/dt29ctu820z5o27/E4.wav?raw=1"></audio>
  <audio preload="auto" data-key="70" src="https://www.dropbox.com/s/ekxipaae5z5o6pj/F4.wav?raw=1"></audio>
  <audio preload="auto" data-key="84" src="https://www.dropbox.com/s/zcxdjd1h7vnb8gj/FSharp4.wav?raw=1"></audio>
  <audio preload="auto" data-key="71" src="https://www.dropbox.com/s/fxmjtc6sdn6z6rw/G4.wav?raw=1"></audio>
  <audio preload="auto" data-key="89" src="https://www.dropbox.com/s/wiefstl79c7zhx5/GSharp4.wav?raw=1"></audio>
  <audio preload="auto" data-key="72" src="https://www.dropbox.com/s/cw5vif8xfiz3awi/A4.wav?raw=1"></audio>
  <audio preload="auto" data-key="85" src="https://www.dropbox.com/s/9mvr1pu8g7ijw55/ASharp4.wav?raw=1"></audio>
  <audio preload="auto" data-key="74" src="https://www.dropbox.com/s/4xvygmn3lxhdc2s/B4.wav?raw=1"></audio>
  <audio preload="auto" data-key="75" src="https://www.dropbox.com/s/0wvnhiy6c09euvj/C5.wav?raw=1"></audio>

<script type="text/javascript" src="piano.js"></script>


html {
    font-size: 10px;
    background: url(https://musicglue-user-app-p-4-p.s3.amazonaws.com/originals/3104e8a5-73dd-fa9c-31b8-395ee3e124d4) bottom center;
    background-size: cover;
}

body,html {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

.keys {
    display: flex;
    flex: 1;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}

.key {
    display: table;
    border-radius: .5rem;
    font-size: 1.5rem;
    padding: 1rem .5rem;
    transition: all .07s ease;
    text-align: center;
}

.white {
    margin: 0.05rem;
    border: .2rem solid rgb(76, 49, 30);
    width: 10rem;
    height: 40rem;
    color: white;
    background-image: radial-gradient(white, #fbf5ee);
    box-shadow: inset 0 0 2rem #7b6349;
    text-shadow: 0 0 .5rem rgb(46, 30, 0);
    z-index: 1;
}

.black {
    position: absolute;
    border: .2rem solid rgb(0, 0, 0);
    width: 5rem;
    height: 23rem;
    color: white;
    background-image: radial-gradient(#5d5d5d, black);
    box-shadow: inset 0 0 0 0.1rem #ffffff70;
    text-shadow: 0 0 .5rem rgb(0, 0, 0);
    z-index: 2;
}

.sharp-pos-top {
    margin-top: -9rem;
}

.c-sharp {
    margin-left: -35rem;
}

.d-sharp {
    margin-left: -23rem;
}

.g-sharp {
    margin-left: 11.5rem;
}

.a-sharp {
    margin-left: 23rem;
}

.playing-white {
    transform: scale(0.98);
    box-shadow: inset 0 0 2rem rgb(37, 28, 10);
    background-image: linear-gradient(#efeae5, #d2c6b8);
}

.playing-black {
    transform: scale(0.98);
    box-shadow: inset 0 0 0 0.1rem rgb(0, 0, 0);
    background-image: radial-gradient(black, #404040);
}

kbd {
    display: table-cell;
    vertical-align: bottom;
    font-size: 4rem;
}


var keysPressed = [];

function playKey(e) 
{
    const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);

    if (key !== null)
    {
        key.classList.contains('white') ? key.classList.add('playing-white') : key.classList.add('playing-black');

        if (!keysPressed.includes(key))
        {
            keysPressed.push(key);
            audio.currentTime = 0;
            audio.play();
        }
    }
}

function resetKey(e)
{
    const key = document.querySelector(`div[data-key="${e.keyCode}"]`);

    var index = keysPressed.indexOf(key);
    if (index !== -1) keysPressed.splice(index, 1);

    if (key !== null) key.classList.remove('playing-white', 'playing-black');
}

window.addEventListener('keydown', playKey);
window.addEventListener('keyup', resetKey);

Leave a Reply