javascript

Reproducir sonidos con JavaScript

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.

Sobre la reproducción automática

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.

Cargando audio

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.

// Carga un sonido a través de su fuente y lo inyecta de manera oculta
const cargarSonido = function (fuente) {
    const sonido = document.createElement("audio");
    sonido.src = fuente;
    sonido.setAttribute("preload", "auto");
    sonido.setAttribute("controls", "none");
    sonido.style.display = "none"; // <-- oculto
    document.body.appendChild(sonido);
    return sonido;
};

De este modo podemos obtener una referencia a un audio así:

const miAudio = cargarSonido("juego.mp3");

Opciones del sonido

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).

Ejemplo completo

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.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reproducir sonido en JavaScript</title>
</head>

<body>
    <button id="btnReproducir">Reproducir sonido</button>
    <button id="btnPausar">Pausar sonido</button>
    <button id="btnReiniciar">Ir a inicio de sonido</button>
    <script src="script.js"></script>
</body>

</html>

Ahora en el script cargamos el audio y agregamos el listener a los botones.

// Carga un sonido a través de su fuente y lo inyecta de manera oculta
const cargarSonido = function (fuente) {
    const sonido = document.createElement("audio");
    sonido.src = fuente;
    sonido.setAttribute("preload", "auto");
    sonido.setAttribute("controls", "none");
    sonido.style.display = "none"; // <-- oculto
    document.body.appendChild(sonido);
    return sonido;
};
const $botonReproducir = document.querySelector("#btnReproducir"),
    $botonPausar = document.querySelector("#btnPausar"),
    $botonReiniciar = document.querySelector("#btnReiniciar");
// El sonido que podemos reproducir o pausar
const sonido = cargarSonido("sonido.flac");
$botonReproducir.onclick = () => {
    sonido.play();
};
$botonPausar.onclick = () => {
    sonido.pause();
};
$botonReiniciar.onclick = () => {
    sonido.currentTime = 0;
};

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.

Demostración y código completo

Reproducir sonido oculto con JavaScript

Puedes ver la demostración en este enlace. También puedes acceder al código completo junto con el sonido en mi github.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

Entradas recientes

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

6 días hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

6 días hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

6 días hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

6 días hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

6 días hace

Solución: Apache – Server unable to read htaccess file

Ayer estaba editando unos archivos que son servidos con el servidor Apache y al visitarlos…

7 días hace

Esta web usa cookies.