Entrar Ainda não tem acesso?
1
resposta

Projeto

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Listas e atividade Faça como eu fiz: Declarando uma referência

por KEVIN SILVA LOPES
| 22.2k xp | 36 posts
<!DOCTYPE html>
<html>
<head>
    <title>Instrumento Musical Digital</title>
</head>
<body>
    <button class="tecla tecla_pom">Pom</button>
    <button class="tecla tecla_clap">Clap</button>
    <button class="tecla tecla_tim">Tim</button>
    <audio id="som_tecla_pom" src="sounds/pom.wav"></audio>
    <audio id="som_tecla_clap" src="sounds/clap.wav"></audio>
    <audio id="som_tecla_tim" src="sounds/tim.wav"></audio>
    <script>
        // Cria uma referência para a lista de todas as teclas
        const teclas = document.querySelectorAll('.tecla');
        // Imprime a lista de teclas no console
        console.log(teclas);
        function tocaSom(idElementoAudio){
            document.querySelector(idElementoAudio).play();
        }
        teclas[0].onclick = function(){
            tocaSom("#som_tecla_pom");
        };
        teclas[1].onclick = function(){
            tocaSom("#som_tecla_clap");
        };
         teclas[2].onclick = function(){
            tocaSom("#som_tecla_tim");
        };
    </script>
</body>
</html>
1 resposta
por Renan Lima
| 3960.3k xp | 8426 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Kevin. Tudo bem?

Muito obrigado por compartilhar o seu código aqui com a gente. Parabéns pelo trabalho. Continue com essa dedicação.

Ótimo como você criou a referência para as teclas e associou os eventos de clique corretamente. O código está bem estruturado e funcional.

Uma dica interessante, outra forma é usar um loop ForEach para evitar repetição no código e tornar a solução mais escalável. Veja este exemplo: 


const teclas = document.querySelectorAll('.tecla');

teclas.forEach(tecla => {
    tecla.onclick = () => {
        const som = `#som_${tecla.classList[1]}`;
        tocaSom(som);
    };
});

Esse código percorre todas as teclas e usa template strings para construir automaticamente o ID do som correspondente.

Conte com o apoio do Fórum. Abraços e bons estudos!