"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 [email protected]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 !
Conviertete en un programador más sociable