Quería volver a preguntar, basándome en la respuesta que obtuve a una pregunta que había hecho antes. Estoy tratando de hacer un efecto de sonido cuando se hace clic en los botones de mi proyecto. Vi que el efecto de sonido que le di dirección a los botones no se materializó. Luego concluí como publiqué a continuación. Pero esto no funciona del todo bien.
<button href="index.html" type="button" class="menu-icon" onClick="playMyAudio()" preload="auto">Play Audio</button> <audio src="sound/Message Pop.mp3" preload="auto" id="myAudio"></audio> <script> const audioEl = document.getElementById("myAudio"); function playMyAudio() { audioEl.play(); } const buttonLinks = document.querySelectorAll("button[href]"); const delay = 75;//milliseconds audioEl.addEventListener("canplaythrough", () => { buttonLinks.forEach(btn => { btn.addEventListener("click", (e) => { setTimeout(() => { window.location = btn.getAttribute("href") }, audioEl.duration + delay); }) }); }); </script>¿Qué método puedo seguir para un resultado más efectivo aquí?
En la versión final, los botones a veces suenan ya veces no.
Gracias.
Aquí hay un ejemplo que armé de hacer clic en un botón para reproducir un MP3 en Javascript. ¡Espero que esto ayude!
aplicación.html
<!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>Sound Test</title> </head> <body> <button id="soundButton">Click Me!</button> <script type="text/javascript" src="app.js"></script> </body> </html>aplicación.js
const soundButton = document.querySelector('#soundButton'); soundButton.addEventListener('click', function () { playSound(); }); function playSound() { const sound = new Audio('catMeowing.mp3').play(); }