Entrar Ainda não tem acesso?
1
resposta

[Dúvida] SUGESTÃO / DÚVIDA

Referente ao curso JavaScript para Web: Crie páginas dinâmicas, no capítulo Iterando em listas e atividade Textos dinâmicos

por Antonio Sergio da Costa Teixeira
| 46.6k xp | 8 posts

Olá,

Antes de iniciar esta aula tentei resolver a problemática de automatizar a reprodução dos sons. Meu primeiro insight foi criar uma lista dos sons, através da tag audio. A seguir, ao invés de fazer uso da template string, usei o contador para percorrer o índice da lista de sons. Funcionou como suposto. Gostaria de saber se está correto. 

const botoesLista = document.querySelectorAll('.tecla');
const sons = document.querySelectorAll('audio');


function tocaSom(tipoInstrumento){
    tipoInstrumento.play();
}

for(i=0 ; i < botoesLista.length; i++){
    const botao = botoesLista[i];
    const tipoInstrumento = sons[i];
    // const instrumento = botao.classList[1];
    // const idAudio = `#som_${test}`;

  botao.onclick = function(){
    tocaSom(tipoInstrumento);
  }

  botao.onkeydown = () => {
    botao.classList.add('ativa'); 
}

    botao.onkeyup = () =>{
        botao.classList.remove('ativa');
    }
}
1 resposta
por Renan Lima
| 3640.6k xp | 7680 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Antonio, tudo bem?

Isso é uma abordagem válida e funciona, então você está no caminho certo!

Mas como a abordagem utilizada no curso foi um pouco diferente, precisa ver se não vai dificultar para seguir com o curso.

Pensando nisso vou deixar um exemplo de como foi feito no curso, o código foi escrito de forma a obter o nome do som a partir da classe do botão clicado. Isso foi feito para tornar o código mais dinâmico e menos dependente da ordem dos elementos na página.

Por exemplo, se a ordem dos botões ou dos sons no HTML for alterada, seu código pode não funcionar corretamente, pois ele depende da ordem dos elementos. Já a abordagem do curso, que usa o nome da classe do botão para determinar qual som deve ser tocado, continuará funcionando mesmo que a ordem dos botões ou sons seja alterada.

Aqui está um exemplo de como isso foi feito no curso:

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;
}

Nesse código, a função tocaSom() recebe o ID do elemento de áudio que deve ser tocado. Esse ID é construído dinamicamente com base no nome da classe do botão que foi clicado.

Espero ter ajudado. Qualquer dúvida manda aqui. Bons estudos.