Quiero hacer un sitio web con varios botones diferentes donde cada uno reproduzca un sonido diferente. ¿Alguien me puede ayudar? Intenté hacer este código a continuación, pero la otra parte no funciona:/ Gracias de antemano.
<!DOCTYPE html> <html lang="en"> <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>BUTTONS AND SOUNDS</title> </head> <body> <h1>Sound Effects</h1> <div class="phrase1"> <audio id='phrase1'> <source src="sound1.wav"> </audio> <button>Play 1!</button> <script> const button = document.querySelector('button') button.addEventListener('click', function(){ const audio= document.querySelector('#phrase1') audio.currentTime = 0 audio.play() }) </script> </div> <div class="phrase2"> <audio id='phrase2'> <source src="sound2.wav"> </audio> <button>Play 2!</button> <script> const button = document.querySelector('button') button.addEventListener('click', function(){ const audio= document.querySelector('#phrase2') audio.currentTime = 0 audio.play() }) </script> </div> </html>Su selector de consulta siempre solo encuentra el primer botón. Intente darle a sus botones una identificación diferente para distinguirlos y utilícelo en su querySelector()
<!DOCTYPE html> <html lang="en"> <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>BUTTONS AND SOUNDS</title> </head> <body> <h1>Sound Effects</h1> <div class="phrase1"> <audio id='phrase1'> <source src="sound1.wav"> </audio> <button id="button1">Play 1!</button> <script> const button1 = document.querySelector('#button1') button1.addEventListener('click', function(){ const audio= document.querySelector('#phrase1') audio.currentTime = 0 audio.play() }) </script> </div> <div class="phrase2"> <audio id='phrase2'> <source src="sound2.wav"> </audio> <button id="button2">Play 2!</button> <script> const button2 = document.querySelector('#button2') button2.addEventListener('click', function(){ const audio= document.querySelector('#phrase2') audio.currentTime = 0 audio.play() }) </script> </div> </html>Deberías hacerlo.
Parte de tu problema está aquí:
const button = document.querySelector('button')Debe usar un selector de CSS basado en ID , en lugar de solo el nombre de un elemento HTML, para encontrar el botón que desea. Algo como esto sería mejor:
<button id="playone">Play 1!</button> ... const button = document.querySelector('#playone')Opa, tá aquí o código:
<!DOCTYPE html> <html> <head> <title>Player com botões</title> <meta charset="utf-8"> </head> <body> <div id="app"> <div id="buttons"></div> <audio id="audio"></audio> </div> <script type="text/javascript"> const buttons = document.querySelector('#buttons'); const audio = document.querySelector('#audio'); const player = { format: 'mp3', buttons: [ { name: 'Botão do som 1', url: 'audio1.mp3' }, { name: 'Botão do som 2', url: 'audio2.mp3' } ], render() { this.buttons.map((button, b) => { buttons.innerHTML += ` <button onclick="player.play(${b});">${button.name}</button> `; }); }, play(button_id) { audio.pause(); audio.innerHTML = ` <source src="${this.buttons[button_id].url}" type="audio/${this.format}"> `; audio.load(); audio.play(); } }; player.render(); </script> </body> </html>