<!DOCTYPE html>
<html>
<head>
<title>Instrumento Musical Digital</title>
</head>
<body>
<button class="tecla_pom">Pom</button>
<audio id="som_tecla_pom" src="sounds/pom.wav"></audio>
<script src="script.js"></script>
</body>
</html>
const botaoPom = document.querySelector('.tecla_pom');
const audioPom = document.querySelector('#som_tecla_pom');
botaoPom.addEventListener('click', () => {
audioPom.play();
});
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ê utilizou o addEventListener para tocar o som ao clicar no botão. Isso deixa o código mais organizado e facilita a manutenção.
Você pode adicionar um efeito visual ao botão quando ele for pressionado. Veja este exemplo:
botaoPom.addEventListener('mousedown', () => {
botaoPom.classList.add('ativa');
});
botaoPom.addEventListener('mouseup', () => {
botaoPom.classList.remove('ativa');
});
Isso faz com que o botão receba a classe "ativa" quando pressionado e remova ao soltar, possibilitando estilizar com CSS(Alterar cor do botão no momento do clique, fontes, etc).
Conte com o apoio do Fórum. Abraços e bons estudos!