<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="data:;base64,iVBORwOKGO=" />
    <link rel="stylesheet" href="style.css" />
    <title>Project #16 - The Piano App</title>
  </head>
  <body>
    <div class="piano">
      <div data-note="C" class="key white"></div>
      <div data-note="Db" class="key black"></div>
      <div data-note="D" class="key white"></div>
      <div data-note="Eb" class="key black"></div>
      <div data-note="E" class="key white"></div>
      <div data-note="F" class="key white"></div>
      <div data-note="Gb" class="key black"></div>
      <div data-note="G" class="key white"></div>
      <div data-note="Ab" class="key black"></div>
      <div data-note="A" class="key white"></div>
      <div data-note="Bb" class="key black"></div>
      <div data-note="B" class="key white"></div>
    </div>

    <audio id="C" src="notes/C.mp3"></audio>
    <audio id="Db" src="notes/Db.mp3"></audio>
    <audio id="D" src="notes/D.mp3"></audio>
    <audio id="Eb" src="notes/Eb.mp3"></audio>
    <audio id="E" src="notes/E.mp3"></audio>
    <audio id="F" src="notes/F.mp3"></audio>
    <audio id="Gb" src="notes/Gb.mp3"></audio>
    <audio id="G" src="notes/G.mp3"></audio>
    <audio id="Ab" src="notes/Ab.mp3"></audio>
    <audio id="A" src="notes/A.mp3"></audio>
    <audio id="Bb" src="notes/Bb.mp3"></audio>
    <audio id="B" src="notes/B.mp3"></audio>

    <!-- ------------------------- -->
    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: rgb(219, 146, 242);
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.piano {
  display: flex;
}

.white {
  width: 100px;
  height: 400px;
  background-color: white;
  border: 1px solid #333;
}

.white.active {
  background-color: #ccc;
}

.black {
  width: 60px;
  height: 240px;
  background-color: black;
  margin-left: -30px;
  margin-right: -30px;
  z-index: 2;
}

.black.active {
  background-color: #333;
}

const WHITE_KEYS = ["z", "x", "c", "v", "b", "n", "m"];
const BLACK_KEYS = ["s", "d", "g", "h", "j"];

const keys = document.querySelectorAll(".key");
const blackKeys = document.querySelectorAll(".key.black");
const whiteKeys = document.querySelectorAll(".key.white");

keys.forEach(function (key) {
  key.addEventListener("click", () => {
    playNote(key);
  });
});

function playNote(key) {
  const noteAudio = document.getElementById(key.dataset.note);

  //음성이 모두 재생될 떄까지 다시 음이 재생되지 않는게 아니라 빠르게 두번 누르면 음이 두 번 재생되도록 시간을 초기화 시킨다.
  noteAudio.currentTime = 0;
  noteAudio.play();
  key.classList.add("active");

  noteAudio.addEventListener("ended", function () {
    key.classList.remove("active");
  });
}

document.addEventListener("keydown", function (e) {
  let key = e.key;
  console.log(key);
  let whiteKeyIndex = WHITE_KEYS.indexOf(key);
  let blackKeyIndex = BLACK_KEYS.indexOf(key);

  if (whiteKeyIndex > -1) playNote(whiteKeys[whiteKeyIndex]);
  if (blackKeyIndex > -1) playNote(blackKeys[blackKeyIndex]);
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.