Как я могу заставить первую кнопку на этом JavaScript пианино работать?

Question

Я сделал пианино на основе yt tutorial, но у меня есть проблема, которую я не могу исправить ... Когда я нажимаю с помощью мыши / клавиатуры на первой кнопке, она не работает, другие работают просто отлично. Знаете ли вы, где ошибка в этом коде?

const WHITE_KEYS = ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p']
const BLACK_KEYS = ['2', '3', '5', '6', '7', '9', '0']

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

keys.forEach(key => {
  key.addEventListener('click', () => 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 > -2) playNote(whiteKeys[whiteKeyIndex])
  if (blackKeyIndex > -1) playNote(blackKeys[blackKeyIndex])
})

function playNote(key) {
  const noteAudio = document.getElementById(key.dataset.note)
  noteAudio.currentTime = 0
  noteAudio.play()
  key.classList.add('active')
  noteAudio.addEventListener('ended', () => {
    key.classList.remove('active')
  })
}

код загрузки

jsfiddle link

Answer 1

Это в вашем html - вы пропустили "c4"

, измените

<audio id="C" ><source src="notes/C4.mp3"></audio>

на

<audio id="C4" ><source src="notes/C4.mp3"></audio>