1. Overview

Challenge & starter files: Advent of JS

Full codes: nilstarbb/advent-of-js/3-piano-keyboard

Live Demo: 03 - Piano || Advent of JavaScript

Preview:

piano.gif

2. Details

Users should be able to:

  • See the keyboard centered on the page
  • Whenever a user hovers over a specific key it will change colors
    • White keys will change to yellow #ffd200
    • Black keys will change to pink #f40082
  • When a user clicks on a specific key, it will play an audio clip.
    • The audio clips are numbered, but I did not specifically number the keys. You can pick which key should be associated with each audio file.
    • If a user clicks on one key, then immediately clicks on a second key. The 2 files should both play. Meaning, clicking on one key will not stop an existing audio file from playing.

3. Coding

核心逻辑是在键盘的每一个 key 上绑定 onClick 事件，根据 key 的不同播放不同的声音文件。

const playAudio = (index) => {
  const audio = new Audio("./audio/key-" + (index + 1) + ".mp3");
  if (audio) {
    audio.play();
  }
};

const keys = document.querySelectorAll("a");

for (let index = 0; index < keys.length; index++) {
  const key = keys[index];
  key.onclick = () => playAudio(index);
}

用 addEventListener 也是可以的：

for (let index = 0; index < keys.length; index++) {
  const key = keys[index];
  key.addEventListener("click", () => playAudio(index));
}