script.js

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

const keys = document.querySelectorAll('.key');
const whiteKeys = document.querySelectorAll('.wkeys');
const blackKeys = document.querySelectorAll('.bkeys');

keys.forEach(key => {
  key.addEventListener('mousedown', () => playNote(key))
});

document.addEventListener('keydown',e => {
  if(e.repeat) return;
  const key = e.key;
  const whiteKeyIndex = WHITE_KEYS.indexOf(key);
  const blackKeyIndex = BLACK_KEYS.indexOf(key);

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

function playNote(key){
  const noteAudio = document.getElementById(key.dataset.note);
  noteAudio.currentTime = 0;
  noteAudio.play();
  // console.log(noteAudio.getAttribute('src'));
}