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