erro na hora de reproduzir o audio

<title>Alura MIDI</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&display=swap" rel="stylesheet"> <link rel="icon" type="image/png" href="images/bateria.png"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/estilos.css">

<h1>Alura Midi</h1> <section class="teclado"> <button class="tecla tecla_pom">Pom</button> <button class="tecla tecla_clap">Clap</button> <button class="tecla tecla_tim">Tim</button> <button class="tecla tecla_puff">Puff</button> <button class="tecla tecla_splash">Splash</button> <button class="tecla tecla_toim">Toim</button> <button class="tecla tecla_psh">Psh</button> <button class="tecla tecla_tic">Tic</button> <button class="tecla tecla_tom">Tom</button> </section> <audio src="sounds/keyq.wav" id="som_tecla_pom"></audio> <audio src="sounds/keyw.wav" id="som_tecla_clap"></audio> <audio src="sounds/keye.wav" id="som_tecla_tim"></audio> <audio src="sounds/keya.wav" id="som_tecla_puff"></audio> <audio src="sounds/keys.wav" id="som_tecla_splash"></audio> <audio src="sounds/keyd.wav" id="som_tecla_toim"></audio> <audio src="sounds/keyz.wav" id="som_tecla_psh"></audio> <audio src="sounds/keyx.wav" id="som_tecla_tic"></audio> <audio src="sounds/keyc.wav" id="som_tecla_tom"></audio> <script src="main.js" > </script>

Olá, Igor! Como vai?

Acredito que o erro seja por conta de você está tentando chamar uma função chamada tocaSom que não foi definida em seu código JS. No código que você compartilhou, você tem uma função chamada tocaSomPom, mas não uma função chamada tocaSom.

No trecho de código:

tecla.onclick = function () {
    tocaSom (idAudio);
}

Você está tentando chamar a função tocaSom, que deveria receber o ID do áudio a ser tocado como parâmetro. No entanto, essa função não existe no código que você forneceu, ai que acontece o erro.

Então devemos preparar o parâmetro com o ID da música, esta função em resumo recebe um ID como parâmetro, usa esse ID para selecionar o elemento de áudio correspondente e, em seguida, chama o método play() nesse elemento para reproduzir o áudio.

Depois de definir essa função, você deve ser capaz de chamar tocaSom(idAudio); dentro do seu evento onclick sem encontrar o erro "tocaSom is not defined".

Seu código corrigido fica assim:

function tocaSom(id) {
    document.querySelector(id).play();
}

const listaDeTeclas = document.querySelectorAll('.tecla');
let contador = 0;  

while (contador < listaDeTeclas.length) {
    const tecla = listaDeTeclas[contador]; 
    const instrumento = tecla.classList[1];
    const idAudio = `#som_${instrumento}`; 

    tecla.onclick = function () {
        tocaSom(idAudio);
    }

    contador = contador + 1;
}

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!