Cómo generar Ondas de Audio (espectro de audio) de un archivo de audio en JavaScript utilizando Wavesurfer.js

"Una onda sonora es el patrón de perturbación causado por el movimiento de la energía que viaja a través de un medio tal como el aire". Es broma, no hablamos tan tecnico! Si trabajas en alguna plataforma de audio en la que necesitas reproducir audio a un usuario, por ejemplo para vender archivos de Audio, es asombroso mostrar las ondas de audio que este genera gráficamente con el fin de que el usuario aprecie la estructura del audio además de lo que tu plataforma puede hacer. Deseas hacerlo en el explorador? Entonces Wavesurfer.js es la herramienta correcta para lograrlo.

Con Wavesurfer.js podrás crear desde un simple reproductor de Audio HTML5 hasta una sofisticada aplicación de DJ, pero en este caso solo te mostraremos cómo crear un básico reproductor que muestra las ondas de audio del archivo con solamente 3 botones: reproducir, pausar y parar.

1. Descarga e incluye Wavesurfer.js

Wavesurfer.js es una herramienta para visualizar fácilmente la forma de las onda de audio de un archivo, construida con la API de Web Audio y usando Canvas de HTML5. De acuerdo a la manera en la que trabajes, puedes cargar esta librería de 2 maneras. La primera es simplemente incluyendo el script fuente de la librería usando un CDN gratuito o con una copia local:

<!-- Cargarlo usando un CDN gratuito -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>

<!-- O desde una copia local -->
<script src="./directorio-de-librerias/wavesurfer.min.js"></script>

Si usas un empaquetador de módulos como browserify, webpack etc, entonces tendrás que usar la versión que soporta esta característica. Instala la librería con NPM usando el siguiente comando:

npm install wavesurfer.js@2.0.0-beta01

Luego podrás fácilmente requerir el módulo usando  require("wavesurfer.js");. Para más información acerca de esta librería, por favor visita el sitio web oficial o el repositorio oficial en Github aquí.

2. Usando la librería

Wavesurfer es super fácil de usar. Con la introducción de la versión 2.0, ahora puedes usar la librería con bundlers y no solamente desde la ventana (window):

Con VanillaJS en el explorador

El método de tu interes es el método create. El unico parametro requerido es container. Este puede ser un selector de CSS3 o un elemento DOM. Sin embargo, puedes tambien pasar cualquier número de opciones. Despues de crear una instancia puedes cargar el archivo de audio para generar sus ondas con el método load. La URL del audio debe ser de tu propio dominio o desde otro sitio web mientras soportes los encabezados CORS:

<!-- un div donde será colocado el canvas -->
<div id="audio-spectrum"></div>

<script>
    // Crea una instancia de wave surfer con su configuración predeterminada
    var Spectrum = WaveSurfer.create({
        container: '#audio-spectrum',
        // Agrega algo de color al especto de audio
        progressColor: "#03a9f4"
    });
    
    Spectrum.on("ready", function(){
        // Hacer algo cuando el archivo ya haya sido cargado
        
        // Haz lo que sea que necesites con el reproductor:
        Spectrum.play();
        Spectrum.pause();
        Spectrum.stop();
    });

    // Carga el audio desde tu propio dominio
    Spectrum.load('audio-file.mp3');
</script>

El plugin expone la variable global WaveSurfer en el explorador, así que puedes simplemente usarlo una vez el script es cargado.

Usando un empaquetador de módulos (bundler)

Wavesurfer es tambien fácil de usar con webpack, browserify etc. Solamente debes requerir el módulo en vez de usar la variable global:

<!-- un elemento div donde se mostrará el reproductor -->
<div id="audio-spectrum"></div>

<script>
    // Obtener módulo de wavesurfer
    var WaveSurfer = require("wavesurfer.js");

    // Crear una instancia de wave surfer con su configuración básica
    var Spectrum = WaveSurfer.create({
        container: '#audio-spectrum',
        // Agrega algo de color 
        progressColor: "#03a9f4"
    });
    
    Spectrum.on("ready", function(){
        // Hacer algo cuando el archivo de audio cargue

        // Hacer lo que necesites con el reproductor
        Spectrum.play();
        Spectrum.pause();
        Spectrum.stop();
    });

    // Cargar el archivo de audio desde tu dominio
    Spectrum.load('audio-file.mp3');
</script>

Ejemplo final

El siguiente documento está listo para ser probado, así que solamente necesitas dar una URL de archivo de audio válida. En este caso, tenemos un simple reproductor de audio que muestra las ondas de audio en un canvas con 3 botones, reproducir, pausar y para. El archivo nucleo de Wavesurfer puede ser incluido a través de un CDN:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>AudioSpectrum in JavaScript</title>
    </head>
    <body>
        <!-- Crear un div donde se mostrará el reproductor --> 
        <div id="audio-spectrum"></div>

        <!-- Crear botones de acciones -->
        <input type="button" id="btn-play" value="Reproducir" disabled="disabled"/>
        <input type="button" id="btn-pause" value="Pausar" disabled="disabled"/>
        <input type="button" id="btn-stop" value="Detener" disabled="disabled" />

        <!-- Cargar el script de wavesurfer en este caso desde un CDN -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.3.7/wavesurfer.min.js"></script>

        <script>
            // Guardar los 3 botones en algun objeto
            var buttons = {
                play: document.getElementById("btn-play"),
                pause: document.getElementById("btn-pause"),
                stop: document.getElementById("btn-stop")
            };

            // Crea una instancia de wave surfer con su configuración
            var Spectrum = WaveSurfer.create({
                container: '#audio-spectrum',
                progressColor: "#03a9f4"
            });

            // Manipular boton de reproducir
            buttons.play.addEventListener("click", function(){
                Spectrum.play();

                // Activar/Desactivar respectivamente botones
                buttons.stop.disabled = false;
                buttons.pause.disabled = false;
                buttons.play.disabled = true;
            }, false);

            // Manipular boton de pausa
            buttons.pause.addEventListener("click", function(){
                Spectrum.pause();

                // Activar/Desactivar respectivamente botones
                buttons.pause.disabled = true;
                buttons.play.disabled = false;
            }, false);


            // Manipular boton de detener
            buttons.stop.addEventListener("click", function(){
                Spectrum.stop();

                // Activar/Desactivar respectivamente botones
                buttons.pause.disabled = true;
                buttons.play.disabled = false;
                buttons.stop.disabled = true;
            }, false);


            // Agregar un event listener para activar el boton de reproducir una vez que el audio este cargado
            Spectrum.on('ready', function () {
                buttons.play.disabled = false;
            });
            
            // Si quieres un modo responsivo (cuando el usuario redimensiona la ventana)
            // las ondas serán igualmente reproducibles
            window.addEventListener("resize", function(){
                // Obten el progreso de acuerdo a la posición del cursor
                var currentProgress = Spectrum.getCurrentTime() / Spectrum.getDuration();

                // Resetear gráfica
                Spectrum.empty();
                Spectrum.drawBuffer();
                // Colocar posición original
                Spectrum.seekTo(currentProgress);

                // Activar/Desactivar respectivamente botones
                buttons.pause.disabled = true;
                buttons.play.disabled = false;
                buttons.stop.disabled = false;
            }, false);

            // Cargar el archivo de audio desde tu dominio
            Spectrum.load('audio-file.mp3');
        </script>
    </body>
</html>                                                                                                                                                                                                                                                                                                        

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable