-2

Eu tenho esse código abaixo, mas só consegui criar um botão que toca um só som. Podem me ajudar como coloco mais botões com diferentes sons ou ainda como colocar mais sons no mesmo botão (algo como sons aleatórios que tocam quando se aperta tal botão)?

<!DOCTYPE html>
<html lang="pt br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Botões com Som</title>
</head>
<body>
    <h1>Botões e efeitos sonoros</h1>
        <audio> 
            <source src="som1.wav">
        </audio>
        <button>Uepa!</button>
        <script>
            const button = document.querySelector('button')
            button.addEventListener('click', function(){
                const audio= document.querySelector('audio')
                audio.currentTime = 0
                audio.play()
            })
        </script>
</body>
</html>

1 Resposta 1

0

É preciso atribuir um ID a cada elemento audio. Depois coloca-se os IDs todos num array e usamos o Math.random() para escolher um ID aleatório.

<h1>Botões e efeitos sonoros</h1>
<audio id="som1"> 
    <source src="som1.wav">
</audio>
<audio id="som2"> 
    <source src="som2.wav">
</audio>
<audio id="som3"> 
    <source src="som3.wav">
</audio>
<button>Uepa!</button>
<script>
    const button = document.querySelector('button');

    const sons = ["#som1", "#som2", "#som3"];

    button.addEventListener('click', function() {
        let som = sons[Math.floor(Math.random() * sons.length)];
        let audio = document.querySelector(som);
        audio.currentTime = 0
        audio.play()
    })
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .