> Faqs > ¿Cómo reproducir un sonido automático al cargar una página web?

¿Cómo reproducir un sonido automático al cargar una página web?

Quisiera saber cómo reproducir un archivo de sonido (que tiene extension mp3) de manera automática al cargar una pagina de PHP.

He probado muchos ejemplos y no me funciona por que agrega el control de sonido y así no me intersesa.

Gracias de antemano.

Para que no te agregue el control del sonido, la interfaz de la etiqueta audio, simplemente haz que desaparezca con un style="display:none" ya sea en la propia etiqueta audio o en el contenedor.

Respuestas

Para reproducir un sonido de manera directa, según carga la página, tienes que cumplir una serie de condiciones.

La más simple es que el usuario haya interaccionado previamente con la página. Esto es, por ejemplo, que haya realizado un simple clic en cualquier elemento de la página. En ese momento (en el que sepas seguro que el usuario ha hecho clic) ya puedes presentar el sonido con el autoplay.

Para explicarme mejor, anteriormente era suficiente colocar una etiqueta de sonido como esta:

<audio autoplay loop>
  <source src="archivo-audio.ogg" type="audio/ogg">
  <source src="archivo-audio.mp3" type="audio/mpeg">
</audio>

Pero como digo, si esa etiqueta aparece antes de que el usuario haya interaccionado con la página, simplemente no comenzará el sonido y no servirá para nada. Aunque más tarde interaccione, como la etiqueta ya estaba presente, no es posible conseguir el autoplay.

La solución es asegurarte que esa etiqueta aparezca en la página justo después que el usuario haya hecho clic en cualquier parte del documento. Esto lo puedes conseguir con Javascript, con un código como este:

const playSound = function() {
    let element = document.createElement('div');
    element.setAttribute('style', 'display: none');
    element.innerHTML = `
      <audio autoplay loop>
        <source src="archivo-audio.ogg" type="audio/ogg">
        <source src="archivo-audio.mp3" type="audio/mpeg">
      </audio>
    `;
    document.body.appendChild(element);
    document.removeEventListener('click', playSound);
}

document.addEventListener('click', playSound);

Otra alternativa que puede reducir tu código Javascript es que tengas ya la etiqueta de audio en la página, sin el autoplay y que la reproduzcas con Javascript al producirse el clic en el documento.

<audio loop id="audioelement">
    <source src="archivo-audio.ogg" type="audio/ogg">
    <source src="archivo-audio.mp3" type="audio/mpeg">
</audio>

<a href="sonido2.html">sonido2</a>
<script>
const playSound = function() {
    document.getElementById('audioelement').play();
    document.removeEventListener('click', playSound);
}
document.addEventListener('click', playSound);
</script>

Por último, estaría la alternativa de usar la clase Audio de Javascript. Pero este código no produciría un sonido en bucle, que comience de nuevo al acabarse. Además que no es posible entregar como varios archivos de audio para que el navegador escoja aquel que le sea compatible.

const playSound = function() {
  var sonido = new Audio("archivo-audio.mp3");
  sonido.play();
  document.removeEventListener('click', playSound);
}
document.addEventListener('click', playSound);

He visto que comentan otra alternativa que usa un iframe, pero la verdad es que no he podido hacer que funcione. El asunto puede deberse simplemente a que Google Chrome cambia sus políticas de sonido o de reproducción directa (autoplay) de vídeos y cada vez las hace más restrictivas, por lo que lo que funciona en un momento dado puede no funcionar más adelante.

De momento, lo más seguro y que parece que no va a cambiar, sería simplemente asegurarte que el usuario ha interaccionado con la página, para posteriormente reproducir el sonido que necesites.

Alba
353 9 25 12
no me resulta. help!

Utiliza javascript

$(document).ready(function() {
  var sonido = new Audio("sonido.wav");
  sonido.play();
});
Cristian
125 6 13
Creo que solo funcionaría si el usuario previamente ha interactuado con el documento.