WaveSurfer.Js: Crea WaveForm de Audios con Javascript al estilo SoundCloud - Programación

2.8kvistas

Hola a todos, hoy veremos este plugin javascript llamado WaveSurfer.js, que es una gran utilidad que nos ayuda a crear un WAVEFORM el cual sirve para visualizar las ondas sonoras de un audio, al estilo SoundCloud, lo que da un estilo bien moderno a nuestras aplicaciones de audio, que estemos desarrollando. Este Pluging esta construido utilizando Web Audio API y HTML5 Canvas. Es muy sencillo solo basta con vincular el archivo js y escribir el javascript correspondiente asi como una pequeña interfaz para controlar la reproducción , y listo, lo tendremos funcionando.

Ahora les enseñare como colocarlo en la web de una manera correcta para que funcione como se debe.

1.- Descargando Elementos

Primero se deben descargar el archivo js, desde la pagina oficial WAVESURF.JS o desde GITHUB(Recomendado bajar todo el paquete)

2.- Codificando

Primero que nada hay que importar a nuestra pagina web el archivo js:

  <!-- Incluimos wavesurfer.js desde cdnjs -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.4/wavesurfer.min.js"></script>

Ahora lo que debemos hacer es Crear el objeto, y definir sus opciones, de momento utilizaremos las basicas.

var wavesurfer = Object.create(WaveSurfer);
wavesurfer.init({
    container: '#wave',
    waveColor: 'violet',
    progressColor: 'purple'
});

Finalmente escogemos el archivos de audio que queramos, y podemos subirlo a algún medio de difusión o de manera local para probar como funciona.

wavesurfer.load('audio.wav');

Ahora lo ultimo es agregar el codigo HTML, el contenedor, los elemntos contenedores de el waveform, podremos tambien agregar botones de controles de reproduccion.



<div id="waveform">
    <!-- Aqui el script escribira los elementos necesarios -->
  </div>

Aquí pues en combinación con BootsTrap podemos mostrar unos bonitos botones


<div class="controls">
    <button class="btn btn-primary" onclick="wavesurfer.skipBackward()">
	Atras
    </button>

    <button class="btn btn-primary" onclick="wavesurfer.playPause()">
      Play
      /
      Pause
    </button>

    <button class="btn btn-primary" onclick="wavesurfer.skipForward()">
      Adelante
    </button>

    <button class="btn btn-primary" onclick="wavesurfer.toggleMute()">
     silencio
    </button>
  </div>

Nuestro Codigo deberia quedar asi.


<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="x-ua-compatible" content="ie=edge">

  <title>wavesurfer.js</title>
<!-- Incluimos wavesurfer.js desde cdnjs -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.4/wavesurfer.min.js"></script>

    <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
  
</head>
  <body>
<!-- Define los elementos HTML donde waveform se cargara -->
  <div id="waveform">
    <progress id="progress" class="progress progress-striped" value="0" max="100"></progress>
  </div>

  <script>
    var ctx = document.createElement('canvas').getContext('2d');
    var linGrad = ctx.createLinearGradient(0, 64, 0, 200);
    linGrad.addColorStop(0.5, 'rgba(255, 255, 255, 1.000)');
    linGrad.addColorStop(0.5, 'rgba(183, 183, 183, 1.000)');

    var wavesurfer = WaveSurfer.create({
      // Usa ID o NOMBRE DE CLASE(CLASS) del elemento que creo como selector
      container: '#waveform',
      // El color puede ser para sea un simple Color CSS o gradiente Canvas
      waveColor: linGrad, // es esto o esto '#000'
      progressColor: 'hsla(200, 100%, 30%, 0.5)',
      cursorColor: '#fff',
      // Este parametro hace que el aspecto del waveform se paresta a el reproductor de SoundCloud
      barWidth: 3,
	  interact: false
    });

    wavesurfer.on('loading', function (percents) {
      document.getElementById('progress').value = percents;
    });

    wavesurfer.on('ready', function (percents) {
      document.getElementById('progress').style.display = 'none';
    });

    wavesurfer.load('/demos/waveform/media/demo.wav');
  </script>

  <div class="controls">
    <button class="btn btn-primary" onclick="wavesurfer.skipBackward()">
      <i class="fa fa-step-backward"></i>
      Atras
    </button>

    <button class="btn btn-primary" onclick="wavesurfer.playPause()">
      <i class="fa fa-play"></i>
      Play
      /
      <i class="fa fa-pause"></i>
      Pausa
    </button>

    <button class="btn btn-primary" onclick="wavesurfer.skipForward()">
      <i class="fa fa-step-forward"></i>
      Adelante
    </button>

    <button class="btn btn-primary" onclick="wavesurfer.toggleMute()">
      <i class="fa fa-volume-off"></i>
      Silenciar
    </button>
	</div>
  </body>
</html>

3. Configurando

Este pluging se puede configurar con algunos parámetros y/o opciones que puedes colocar justo después de haberlo creado para que tenga las funcionalidades y aspecto que deseas. Paso a detallar estas opciones y para que sirven, claro que también esta en su pagina principal aqui.

Opciones de WaveSurfer

audioContext (tipo: object | por defecto: none): Utilice su propio AudioContext previamente inicializado o déjelo en blanco.
audioRate (tipo: float | por defecto: 1): Velocidad de reproducción de audio. El número más bajo es más lento.
backend (tipo: string | por defecto: WebAudio): WebAudio o MediaElement. En la mayoría de los casos, no es necesario configurarlo manualmente. MediaElement es una alternativa para navegadores no compatibles.
barWidth (tipo: number | por defecto: none): Si es especificado, el waveform sera dibujado de esta manera: ▁ ▂ ▇ ▃ ▅ ▂
container (tipo: mixed | por defecto: none): Selector-CSS o elemento HTML donde se debe dibujar el waveform. Este es el único parámetro requerido.
cursorColor (tipo: string | por defecto: ‘#333’): El color de relleno del cursor que indica la posición del reproductor.
cursorWidth (tipo: integer | por defecto: 1): Ancho del cursor. Medido en píxeles.
fillParent (tipo: boolean | por defecto: true): Ya sea para llenar el contenedor completo o dibujar sólo de acuerdo con minPxPerSec.
height (tipo: integer | por defecto: 128): La altura del waveform. Medido en píxeles.
hideScrollbar (tipo: boolean | por defecto: false): Si desea ocultar la barra de desplazamiento horizontal cuando normalmente se muestra.
interact (tipo: boolean | por defecto: true): Esto es para que no aparesca el waveform hasta que le deamos play, tampoco podremos intercatuar con el mouse.
maxCanvasWidth (tipo: integer | por defecto: 4000): Ancho máximo en pixeles de un solo canvas, excluyendo una pequeña superposición (2 * pixelRatio, redondeado al siguiente entero par). Si el waveform es mayor que este valor, se utilizarán imágenes adicionales para representar el waveform, lo que es útil para waveform muy grandes que pueden ser demasiado amplias para que los navegadores puedan dibujar en un solo canvas. Este parámetro sólo es aplicable al renderizador MultiCanvas.
mediaType (tipo: string | por defecto: ‘audio’): ‘audio’ o ‘video’. Solamente usando con backend: 'MediaElement'
minPxPerSec (tipo: integer | por defecto: 50): Numero minimo de pixeles por segundo del audio.
normalize (tipo: boolean | por defecto: false): Si es true, normalizara el pico maximo en lugar de 1.0
pixelRatio (tipo: integer | por defecto: window.devicePixelRatio): Se puede establecer en 1 para una representación más rápida.
progressColor (tipo: string | por defecto: ‘#555’): El color de relleno de la parte del waveform detrás del cursor(lo que ya se reproducio).
renderer (tipo: string | por defecto: canvas): El objeto renderizador utilizado para dibujar el waveform. El procesador MultiCanvas puede usarse para renderizar waveform que no pueden encajar en un solo lienzo(canvas) debido a las limitaciones del navegador.
scrollParent (tipo: boolean | por defecto: false): Si desea desplazar el contenedor con un waveform largo. De lo contrario, la forma de onda se reduce al ancho del contenedor (vea fillParent).
skipLength (tipo: float | por defecto: 2): Número de segundos que se deben omitir con los métodos skipForward () y skipBackward (), osea numero de segundos atras y delante en el reproductor.
waveColor (tipo: string | por defecto: #999): El color de relleno del waveform después del cursor(osea lo que aun no se reproduce).
autoCenter (tipo: boolean | por defecto: true): Si hay una barra de desplazamiento, centre el waveform alrededor del progreso.

Metodos de WaveSurfer

Estos metodos los puedes utilizar para personalizar la experiencia y utilizar este pluging en diferentes proyectos.

destroy() – Elimina eventos, elementos y desconecta los nodos de audio Web.
empty() – Borra el waveform como si se hubiera cargado un audio de longitud cero.
getCurrentTime() – Devuelve el progreso actual en segundos.
getDuration() – Devuelve la duración del clip de audio en segundos.
isPlaying() – Devuelve true si se está reproduciendo, false en caso contrario.
load(url) – Carga audio desde URL a través de XHR. Devuelve objeto XHR.
loadBlob(url) – Carga audio desde un objeto Blob o File.
on(eventName, callback) – Suscribe a un evento. Vea Eventos de WaveSurfer para la lista de todos los eventos.
un(eventName, callback) – Cancelar la suscripción de un evento.
unAll() – Cancelar todos los evento.
pause() – Detiene la reproducción.
play([start[, end]]) – Inicia la reproducción desde la posición actual. Opcional start y end medidos en segundos pueden utilizarse para establecer el rango de audio a reproducir.
playPause() – Reproduce si se detiene, se detiene si se reproduce.
seekAndCenter(progress) – Busca una vista de progreso y centros [0..1] (0 = iniciando, 1 = fin).
seekTo(progress) – Busca un progreso [0..1] (0 = iniciando, 1 = fin)..
setFilter(filters) – Para insertar sus propios nodos WebAudio en el gráfico.
setPlaybackRate(rate) – Establece la velocidad de reproducción ( 0.5 es la velocidad media, 1 es la velocidad normal, 2 es doble velocidad y así sucesivamente).
setVolume(newVolume) – Establece el volumen de reproducción a un nuevo valor [0..1] (0 = silencioso, 1 = máximo).
skip(offset) – Salte unos segundos de la posición actual (use un valor negativo para retroceder).
skipBackward() – Rebobinar skipLength segundos.
skipForward() – Saltar hacia delante skipLength segundos.
stop() – Se detiene y va al principio.
toggleMute() – Activa o desactiva el volumen.
toggleInteraction() – Activa la interacción del ratón.
toggleScroll() – Activa scrollParent.
zoom(pxPerSec) – Ajusta horizontalmente la forma de onda dentro y fuera. El parámetro es un número de píxeles horizontales por segundo de audio. También cambia el parámetro minPxPerSec y activa la opción scrollParent.

Eventos de WaveSurfer

Puedes usar los metodos on() y un() para subscribir y eliminar suscripcion de varios eventos del reproductor. Por ejemplo:

wavesurfer.on('pause', function () {
    wavesurfer.params.container.style.opacity = 0.9;
});

audioprocess – Se enciende continuamente mientras se reproduce el audio. También se dispara en la búsqueda.
error – Se produce por error. La devolución de llamada recibirá un mensaje de error (cadena).
finish – Cuando termina de reproducir.
loading – Se dispara continuamente al cargar mediante XHR o arrastrar y soltar. El Callback recibirá progreso de carga (integer) en porcentajes [0..100] y evento de destino (object).
pause – Cuando el audio está pausado.
play – Cuando empieza a reproducir.
ready – Cuando el audio es cargado, decodificado y el waveform dibujado.
scroll – Cuando se desplaza la barra de desplazamiento. El Callback recibirá un objeto ScrollEvent .
seek – Activa la buqueda. Callback recibirá el progreso (flotante) [0..1].
zoom – Activa zoom. Callback recibira (integer) minPxPerSec.

Bueno esto es todo por ahora con este pluging javascript bastante interesante que pude encontrar y analizar hace tiempo, que por fin lo puedo publicar con tranquilidad, Cambien mencionar que este pluging tiene batsantes otros complementos con los que se puede ampliar enormemente su potencial, aquí la lista de complementos que puedes analizar para su uso, ademas de proyectos libres y de pago los que han evolucionado bastante este pluging, mencionar también que la comunidad en Git esta desarrollando ya las próximas versiones 1.2.6, asi que los invito a que revisen esas secciones para mas novedades.

Espero que fuese de su agrado y cualqueir duda escribanlo en los comentarios y si esta a mi alcance los ayuare con mucho gusto.

Tambien les dejo el demo para que lo revicen y vean como quedo lo que yo pude modificar a mi gusto, hice algunas pruebas con diseño y otras mas, ojala tambien les ayude.

Demo: WaveSurfer.js

1.- Descargando Elementos

2.- Codificando

3. Configurando

Opciones de WaveSurfer

Metodos de WaveSurfer

Eventos de WaveSurfer

Sobre el Autor

Te Recomendamos

Share

Copy short link