Integrar wavesurfer.js en tu proyecto Angular

09/10/20230 comentarios

Hola a todos, hoy os voy a explicar como podemos integrar wavesurfer.js en tu proyecto de Angular.

Wavesurfer.js es un proyecto de código abierto para la la visualización de audio en forma de ondas (waveform), pudiendo personalizar estilos y eventos.

Documentación oficial de wavesurfer.js

Antes de empezar, te recomiendo que te des una vuelta por la documentación oficial que es bastante buena.

Creación proyecto Angular

Lo primero es crear un proyecto Angular, sino sabes como se hace, te dejo un tutorial aquí:

Crear y ejecutar un proyecto angular

Instalación de wavesurfer.js

Para empezar, abre una terminal y escribe:

$ npm install --save wavesurfer.js

Creación de waveform

Antes de crear nuestro waveform, vamos a crear un componente en angular.

$ ng g c wavesurfer

En la parte HTML, pondremos un contendor para almacenar el waveform.

<div #waveform></div>

Y en la parte TS, debemos referenciar ese contenedor con ViewChild, necesitaremos implementar AfterViewInit para que se cargue correctamente.

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import WaveSurfer from 'wavesurfer.js';

@Component({
  selector: 'app-wavesurfer',
  templateUrl: './wavesurfer.component.html',
  styleUrls: ['./wavesurfer.component.scss']
})
export class WavesurferComponent implements AfterViewInit {

  @ViewChild('waveform', { static: false }) waveformEl: ElementRef;

  ngAfterViewInit(): void {

  }

}

Ahora, nos toca crearnos un objeto usando Wavesurfer.

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import WaveSurfer from 'wavesurfer.js';

@Component({
  selector: 'app-wavesurfer',
  templateUrl: './wavesurfer.component.html',
  styleUrls: ['./wavesurfer.component.scss']
})
export class WavesurferComponent implements AfterViewInit {

  @ViewChild('waveform', { static: false }) waveformEl: ElementRef;

  private waveform: WaveSurfer;

  ngAfterViewInit(): void {

    this.waveform = WaveSurfer.create({
      container: this.waveformEl.nativeElement,
      url: './assets/audio/audio.mp3', // ruta del audio
      waveColor: '#4F4A85',
      progressColor: '#383351',
      barWidth: 2,
      barRadius: 2
    });
    
  }

}

Los campos más importantes son container y url (ruta de un audio). El audio puedes coger el del ejemplo de más abajo u otro cualquiera. Podemos personalizar como queramos nuestro waveform.

Eventos en wavesurfer.js

Los eventos son necesarios para monitorizar las acciones que van ocurriendo en nuestro audio, por ejemplo, cuando se reproduce, cuando se para, cuando interactuamos con el elemento, etc. Con el objeto waveform que hemos creado antes, tenemos dos métodos para monitorizar eventos, en ambos les pasamos el evento y un callback (función):

on: ejecuta el callback pasado cada vez que el evento se lanza.
once: ejecuta el callback pasado solo la primera vez.

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import WaveSurfer from 'wavesurfer.js';

@Component({
  selector: 'app-wavesurfer',
  templateUrl: './wavesurfer.component.html',
  styleUrls: ['./wavesurfer.component.scss']
})
export class WavesurferComponent implements AfterViewInit {

  @ViewChild('waveform', { static: false }) waveformEl: ElementRef;

  private waveform: WaveSurfer;

  ngAfterViewInit(): void {

    this.waveform = WaveSurfer.create({
      container: this.waveformEl.nativeElement,
      url: './assets/audio/audio.mp3', // ruta del audio
      waveColor: '#4F4A85',
      progressColor: '#383351',
      barWidth: 2,
      barRadius: 2
    });
    this.events();
    
  }

  events(){
    
    this.waveform.once('interaction', () => {
      this.waveform.play();
    })
    
  }

}

Reproduciendo y parando audio

Para este tutorial, colocaremos un par de botones para reproducir y parar el audio.

<div #waveform></div>

<div>
    <button (click)="playAudio()">Play</button>
    <button (click)="stopAudio()">Stop</button>
</div>

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import WaveSurfer from 'wavesurfer.js';

@Component({
  selector: 'app-wavesurfer',
  templateUrl: './wavesurfer.component.html',
  styleUrls: ['./wavesurfer.component.scss']
})
export class WavesurferComponent implements AfterViewInit {

  @ViewChild('waveform', { static: false }) waveformEl: ElementRef;
  private waveform: WaveSurfer;

  ngAfterViewInit(): void {

    this.waveform = WaveSurfer.create({
      container: this.waveformEl.nativeElement,
      url: './assets/audio/audio.mp3', // ruta del audio
      waveColor: '#4F4A85',
      progressColor: '#383351',
      barWidth: 2,
      barRadius: 2
    });
    this.events();
    
  }

  events(){
    
    this.waveform.once('interaction', () => {
      this.waveform.play();
    })
    
  }

  playAudio(){
    this.waveform.play();
  }

  stopAudio(){
    this.waveform.stop();
  }

}

Además, cuando se este reproduciendo el audio, pondremos otro botón para pausar, así que necesitamos saber cuando se esta reproduciendo el audio, lo haremos con un atributo y con los eventos «play» y «pause» modificaremos su estado.

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import WaveSurfer from 'wavesurfer.js';

@Component({
  selector: 'app-wavesurfer',
  templateUrl: './wavesurfer.component.html',
  styleUrls: ['./wavesurfer.component.scss']
})
export class WavesurferComponent implements AfterViewInit {

  @ViewChild('waveform', { static: false }) waveformEl: ElementRef;
  private waveform: WaveSurfer;
  public isPlaying: boolean;

  ngAfterViewInit(): void {

    this.isPlaying = false;
    this.waveform = WaveSurfer.create({
      container: this.waveformEl.nativeElement,
      url: './assets/audio/audio.mp3', // ruta del audio
      waveColor: '#4F4A85',
      progressColor: '#383351',
      barWidth: 2,
      barRadius: 2
    });
    this.events();
    
  }

  events(){
    
    this.waveform.once('interaction', () => {
      this.waveform.play();
    })
    
    this.waveform.on('play', () => {
      this.isPlaying = true;
    })
    
    this.waveform.on('pause', () => {
      this.isPlaying = false;
    })
  }

  playAudio(){
    this.waveform.play();
  }

  pauseAudio(){
    this.waveform.pause();
  }

  stopAudio(){
    this.waveform.stop();
  }

}

Cuando este reproduciéndose el audio, mostraremos otro botón para pausar el audio.

<div #waveform></div>

<div>
    <button *ngIf="!isPlaying" (click)="playAudio()">Play</button>
    <button *ngIf="isPlaying" (click)="pauseAudio()">Pause</button>
    <button (click)="stopAudio()">Stop</button>
</div>