Me encontré con un problema en un proyecto que había hecho. Usé la función que arrojé a continuación para tener un efecto de sonido cuando presionamos el botón. Funciona bien, pero cuando le doy la dirección al botón, no hay sonido. ¿Dónde podría estar cometiendo el error? Gracias.
function playMyAudio() { document.getElementById("myAudio").play(); } <audio src="https://css-tricks.com/examples/SoundOnHover/audio/beep.mp3" preload="auto" id="myAudio"></audio> <a href="index.html"> <button onClick="playMyAudio()">Play Audio</button> </a>En realidad, lo que sucede es que cuando hace clic en el botón envuelto en una etiqueta, el enlace hace que el navegador cargue el enlace en lugar de llamar a la función. ... Verifique este fragmento de código que lo ayudará a hacer un enlace de una mejor manera
Solución =>
<audio src="https://css-tricks.com/examples/SoundOnHover/audio/beep.mp3" preload="auto" id="myAudio"></audio> <button href="index.html" onClick="playMyAudio()">Play Audio</button> <script> const audioEl = document.getElementById("myAudio"); function playMyAudio() { audioEl.play(); } const buttonLinks = document.querySelectorAll("button[href]"); const delay = 100;//milliseconds audioEl.addEventListener("canplaythrough", ()=> { buttonLinks.forEach(btn => { btn.addEventListener("click", (e)=> { setTimeout(()=> { window.location = btn.getAttribute("href") }, audioEl.duration + delay); }) }); }); </script>Puede eliminar a etiqueta y redirigir a index.html después de un breve retraso usando JS:
function playMyAudio(){ document.getElementById("myAudio").play(); setTimeout(() => window.location.href = "index.html", 200); }