Reproducir sonido con React

Tiempo de lectura: < 1 minuto

Hoy vamos a implementar una función que nos permitirá reproducir sonido utilizando React.

Lo primero que tenemos que hacer es crear esta función que nos permitirá cargar el sonido:

export function cargarSonido(fuente: string) {
    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;
}

Y para utilizarlo haremos lo siguiente.

Colocamos nuestros sonidos dentro de assets/sounds

Los importamos e invocamos a la función creada poniendo .start() al final.

import mi_sonido from 'assets/sounds/mi_sonido.mp3';

const sonido = cargarSonido(mi_sonido);
sonido.play();