0

Ahora estoy programando con HTML4 porque en HTML5 comienza a presentar errores. Una vez aclarado, comienzo:

Estoy haciendo una intro para mi página web, como tipo “video”. Tengo un setTimeout en la parte del Javascript de mi página. En ese setTimeout quiero reproducir un audio para darle más estilo, pero por alguna razón mi audio no se reproduce. Ya he intentado de todo lo que se me ha ocurrido pero no me ha funcionado. Toda mi intro funciona bien, a excepción del audio.

HTML:

<head>
</head>
<body style="background-color: #000000; display: flex; align-content: center; align-items: center; justify-content: center;"><div><image src="code/images/intro.gif" style="width: 100%; display: flex; align-self: center;"></div>
<script>
setTimeout(function(audio) {
    var whoosh = new Audio("code/sounds/whoosh.wav");
    whoosh.play();
}, 1000);

setTimeout(function(go) {
    window.location.href = "subpages/mainpage.html"
}, 4500);


</script>
</body>
</html>

P.D.: Tengo todo el intro comprimido en un solo archivo para que no se me revuelva con las otras páginas.

0

2 respuestas 2

1

Por motivos de diseño, ninguna web puede reproducir audio sin que haya ninguna acción por parte del usuario. Los play solo van a funcionar si están dentro de un evento de usuario, como un onclick, ontouch...

Por ejemplo, en este código, la música solo se escuchará, hasta que pulses el botón, aunque ya haya saltado el setTimeout.

var musica = new Audio("https://www.bensound.com/bensound-music/bensound-ukulele.mp3");
musica.volume=0;

function activarSonido(){
  if (musica.volume==0){
    if (musica.paused){ // Si no está sonando, hace el play para "activar" el sonido, y lo para hasta que lo active el setTimeout
      musica.play();
      musica.pause();
      musica.currentTime = 0;
     }
    boton.innerHTML="Sonido ON";
    musica.volume = 1;
  }
  else {
    musica.volume = 0;
    boton.innerHTML="Sonido OFF";
  }
}

setTimeout(function(){
  musica.play();
  console.log("play");
},5000);
<button id="boton" onclick="activarSonido()">Sonido OFF</button>

2
  • Muchas gracias por su ayuda. Al final decidí rendirme porque necesitaba que esto fuera 100% automático, probe window.onLoad y no funcionó. Voy a dejarlo sin sonido. Muchas gracias de todos modos. el 26 jul. 2021 a las 20:52
  • 1
    He puesto un código de ejemplo. No se puede hacer automático, porque puede ser muy molesto para el usuario. el 26 jul. 2021 a las 20:53
0

Acabo de agregar este código en w3schools (hoja de demo) y funciona perfectamente.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to wait 3 seconds, then alert "Hello".</p>

<button onclick="myFunction()">Try it</button>

<script>
setTimeout(function(audio) {
    var whoosh = new Audio("https://file-examples-com.github.io/uploads/2017/11/file_example_WAV_1MG.wav");
    whoosh.play();
}, 1000);
  setTimeout(function(){ alert("Hello"); }, 3000);

</script>

</body>
</html>

Como bien dice @arnau-castellví es muy probable que no tengas ninguna lectura de acciones de usuario, pero eso lo puedes resolver fácil con la detección del movimiento del ratón o diferentes sistemas que existen de onload.

Pero si no es ese el motivo, revisa que tienes de host (si te dice que usas HTML4 debe de ser que tiene algo raro).

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.