Click here for free DL of the app version that can save data.

No:14766

←

Prev Next

→

Piano
Developer User6357｜Date and time 23/9/4 6:34:45
Build time 14.106 sec｜Game capacity 1.581KB｜

Script

Piano Game

🎵

🎶

🎷

🎸

🎹

🎺

🎻

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
  <head>
    <title>Piano Game</title>
    <style>
      body {
        background-color: #f2f2f2;
        text-align: center;
      }

h1 {
        color: #333;
      }

.piano-key {
        width: 60px;
        height: 200px;
        background-color: #fff;
        border: 1px solid #999;
        margin: 10px;
        border-radius: 5px;
        display: inline-block;
        cursor: pointer;
      }

.piano-key.active {
        background-color: #999;
      }
    </style>
  </head>
  <body>
    <h1>Piano Game</h1>
    <div id="piano">
      <div class="piano-key" data-note="C">🎵</div>
      <div class="piano-key" data-note="D">🎶</div>
      <div class="piano-key" data-note="E">🎷</div>
      <div class="piano-key" data-note="F">🎸</div>
      <div class="piano-key" data-note="G">🎹</div>
      <div class="piano-key" data-note="A">🎺</div>
      <div class="piano-key" data-note="B">🎻</div>
    </div>

function playSound(note) {
        const audio = new Audio(`sounds/${note}.mp3`);
        audio.play();
      }

function highlightKey(event) {
        const key = event.target;
        key.classList.add('active');
        const note = key.dataset.note;
        playSound(note);
        setTimeout(() => key.classList.remove('active'), 300);
      }

pianoKeys.forEach((key) => {
        key.addEventListener('click', highlightKey);
      });
    </script>
  </body>
</html>