1
resposta

[Projeto] Feedback e desenvolvimento p/ otimizar teclado

Olá, sou egresso da turma T-6, e estou retomando os estudos pois tive absolutamente tudo destruído na enchente em canoas-RS. Mesmo ainda sem retornar para minha casa, estou iniciando a rtomada do programa. Como não podia deixar de ser, excelentes aulas, com didática, material, conteúdo e visual que estão acima da média. Eu havia iniciado este teclado player de MIDI alguns meses atrás, na primeira aula hoje demorei uma hora para o cérebro "reconectar" o modo desenvolvedor, o que aconteceu. Fui um pouquinho mais adiante, para fazer todas as teclas funcionarem, mas pensei: Rm que haver um modo mais enxuto de fazer isso, pois quase tudo é repetido. Dei uma pesquisada e...eis os códigos do JS. onde há uma função que armazena o evento, no caso, um click, já relacionando o que foi clicado com o que deve ser reproduzido. São duas variáveis, e uma condicional que somente irá tocar o som se o arquivo de audio, e coreto, for encontrado. No HTML, alteramos as classes dos botôes para que haja o atributo "data-som" em cada um deles, para associar o botão ao som correspondente:

<section class="teclado">
        <button class="tecla" data-som="som_tecla_pom">Pom</button>
        <button class="tecla" data-som="som_tecla_clap">Clap</button>
        <button class="tecla" data-som="som_tecla_tim">Tim</button>
        <button class="tecla" data-som="som_tecla_puff">Puff</button>
        <button class="tecla" data-som="som_tecla_splash">Splash</button>
        <button class="tecla" data-som="som_tecla_toim">Toim</button>
        <button class="tecla" data-som="som_tecla_psh">Psh</button>
        <button class="tecla" data-som="som_tecla_tic">Tic</button>
        <button class="tecla" data-som="som_tecla_tom">Tom</button>
    </section>  
    
**e no main.js:** 
function tocaSom(event) {
const somId = event.target.dataset.som; // Pega o id do som associado
const audioElement = document.querySelector(`#${somId}`);
if (audioElement) {
    audioElement.play();
}
}

// Seleciona todas as teclas e adiciona o evento de clique
const teclas = document.querySelectorAll('.tecla');
teclas.forEach(tecla => {
tecla.addEventListener('click', tocaSom);
});
1 resposta

Oii, Roger. Tudo bem?

Sinto muito pelo o que aconteceu. Fico feliz em saber que você tá retomando seus estudos, mesmo diante das dificuldades que enfrentou. Espero que as coisas melhorem rapidamente para você.

Quanto ao seu projeto, você tá no caminho certo ao procurar maneiras de otimizar o código. A repetição é algo comum, especialmente quando estamos começando, mas é sempre bom buscar formas de tornar o código mais enxuto e eficiente.

Obrigada por compartilhar com a gente.

Um abraço e bons estudos.