[Projeto] FINALIZAÇÃO PROJETO ALURAMIDI

function tocaSom(seletorAudio) {
  /**
   * Esta função aciona o play no botão selecionado
   * Não tem retorno
   * @param {string} seletorAudio - A tag áudio a ser acionada o play
   * @returns sem retorno
   */
  const elemento = document.querySelector(seletorAudio);
  if (elemento) {
    console.log("Elemento não encontrado ou seletor inválido.");
  }
  if (elemento && elemento.localName === "audio") {
    elemento.play();
  } else {
    console.log("Elemento não encontrado ou seletor inválido.");
  }
}

const listaTeclas = document.querySelectorAll(".tecla"); // Lista com todas as teclas

for (let contador = 0; contador < listaTeclas.length; contador++) {
  const tecla = listaTeclas[contador]; // armazena todos os elementos com a iteração do contador

  const instrumento = tecla.classList[1]; // seleciona a class contido no elemento

  const idAudio = `#som_${instrumento}`; // template string

  // evento de clique no botão para tocar o som
  tecla.onclick = function () {
    // função anonima
    tocaSom(idAudio);
  };

  // evento de apertar a tecla enter ou espaço para dar o efeito de botão apertado
  tecla.onkeydown = function (event) {
    if (event.code === "Enter" || event.code === "Space") {
      tecla.classList.add("ativa");
    }
  };

  // evento de soltar a tecla enter ou espaço para remover o efeito no botão
  tecla.onkeyup = function (event) {
    if (event.code === "Enter" || event.code === "Space") {
      tecla.classList.remove("ativa");
    }
  };
}