Hoy veremos cómo reproducir sonidos con JavaScript, desde sonidos de efectos (como para un videojuego) o una canción completa. Todo esto lo vamos a lograr usando JavaScript y HTML, sin que se muestre un reproductor de sonido.
Los navegadores actuales no permiten reproducir de manera automática un sonido, al menos que el usuario ya haya interactuado con la página anteriormente. Me parece que también se puede si el usuario tiene agregada la página a su pantalla de inicio.
En resumidas palabras no puedes reproducirlo tan pronto llegue a la página, debe ser en el clic del botón o en alguna interacción.
Lo que vamos a hacer es inyectar al documento un elemento de tipo <audio>
oculto, para que esté ahí pero el usuario no lo note. No te preocupes, no tiene nada de malo y funciona de maravilla.
Para ello usamos la siguiente función. Presta atención al src
que indica la fuente del sonido, es decir, su ruta.
De este modo podemos obtener una referencia a un audio así:
const miAudio = cargarSonido("juego.mp3");
Al reproducir sonidos o un audio con JavaScript podemos hacer varias cosas. Te voy a mostrar lo básico que es pausar el sonido, reproducir el sonido y reiniciarlo.
Usamos el método play
para reproducir el sonido. Para pausarlo usamos pause
y finalmente podemos reiniciarlo o rebobinarlo modificando la propiedad currentTime
(con esta propiedad podrías incluso saltar a determinado segundo, etcétera).
Una vez explicado lo básico veamos el ejemplo. Tenemos un documento que tiene 3 botones con las acciones que mencioné anteriormente. Fíjate en que no tiene ningún elemento de tipo audio, pues el mismo será inyectado con JavaScript.
Ahora en el script cargamos el audio y agregamos el listener a los botones.
El sonido es cargado en la línea 15. El mismo se reproduce, pausa y rebobina en la línea 17, 20 y 23 respectivamente.
Recuerda que en este caso son botones, podría ser otro tipo de elemento, y el evento podría igualmente ser distinto.
Puedes ver la demostración en este enlace. También puedes acceder al código completo junto con el sonido en mi github.
En mi blog te he enseñado a usar youtube-dl para descargar vídeos con permiso del…
Siguiendo con los tutoriales que consumen la API de los Bots de Telegram con cURL…
En un post previo te enseñé a enviar un mensaje en nombre de un Bot…
En este artículo te voy a mostrar una guía para imprimir en una impresora térmica…
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
Esta web usa cookies.
Ver comentarios
Muchas gracias por compartir, estaba loco con las restricciones del navegador por parte del evento play.
Gracias, por tu código, me ayudo
Gracias por compartir, me sirvió bastante tu post. Excelentes softwares que tienes aquí en tu página