Home

Angular Wavesurfer Service

This library provides wavesurfer.js as an Angular service and component.

Wavesurfer.js is a customizable audio waveform visualization, built on top of Web Audio API and HTML5 Canvas. With wavesurfer.js you can create anything from an HTML5 audio player to a sophisticated DJ application.

Demo

Try this out on stackblitz

Installation

Use your favorite package manager / npm to install.

npm install angular-wavesurfer-service --save

Add AngularWavesurferServiceModule to your NgModule.

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AngularWavesurferServiceModule } from 'angular-wavesurfer-service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularWavesurferServiceModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You will need to add the following compiler option to your application's tsconfig.json file: "allowSyntheticDefaultImports": true

Usage

WaveService: a Simple WaveSurfer Service

Inject the WaveService in your constructor, and assign the object returned by the create() function to a variable for a full WaveSurfer object.

The create function requires a WaveSurfer configuration object with at least the container property set to an existing element's selector. See Wavesurfer Options below for more configuration options.

app.component.ts

mp3url = 'https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3';

constructor(public waveService: WaveService) {}

ngAfterViewInit() {
  this.wave = this.waveService.create({container: '#waveservice'});
  this.wave.load(this.mp3url);
}

app.component.html

<div id="waveservice"></div>
<button (click)="wave.play()">Play</button>
<button (click)="wave.pause()">Pause</button>

Wavesurfer Component: a ready to go waveform component.

You can use the included wavesurfer click-to-play component anywhere in your app. It requires a URL to an audio file. Be sure to add the single quotes within the double quotes, if the track URL is not bound to a variable.

<wavesurfer [trackurl]="'https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3'"></wavesurfer>

Wavesurfer Options

You can pass an options object to the Wavesurfer component to adjust parameters of the player. See Wavesurfer Options on the Wavesurfer site for a more detailed explanation of each option.

You can also experiment with several of the WaveSurfer parameters using the Wavesurfer Config Playground.

This service currently supports the following options:

container: string
backgroundColor: string
cursorColor: string
progressColor: string
waveColor: string
backend: string
barGap: number
barHeight: number
barMinHeight: number
barRadius: number
barWidth: number
autoCenter: boolean
hideScrollbar: boolean
height: number
interact: boolean
loopSelection: boolean
mediaControls: boolean
normalize: boolean
partialRender: boolean
removeMediaElementOnDestroy: boolean
scrollParent: boolean
splitChannels: boolean
splitChannelsOptionsoverlay: boolean
splitChannelsOptionsrelativeNormalization: boolean
responsive: boolean
skipLength: number
maxCanvasWidth: number
minPxPerSec: number
pixelRatio: number
fillParent: boolean
cursorWidth: number
audioRate: number

Example

<wavesurfer [trackurl]="'https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3'" [wavesurferOptions]="{backgroundColor: 'black',waveColor:'red'}"></wavesurfer>

Wavesurfer Service

Import the Wavesurfer Service directly into your own components to be able to designate other elements as the playback controller.

In your component:

HTML

Give a unique ID to an element and call the Wavesurfer Service's play function as the handler for an event, such as a click on a button.

<button  (click)="wsservice.play()">Play</button>
<div id="myid"></div>

Component

Inject the Wavesurfer Service into your component, and in the AfterViewInit lifecycle method, load your audio file and pass the options object to the load function, specifying the element ID for the container in which Wavesurfer should render.

import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import { AngularWavesurferService } from 'angular-wavesurfer-service';

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

  constructor(public wsservice: AngularWavesurferService) {}

  ngAfterViewInit(): void {
    this.wsservice.load('https://www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3', {container: '#myid'});
  }
}

Features

Click to Play

All rendered waveforms are click-to-play.

Global Media Control Service

When playing any waveform rendererd with this service, all other players instantiated by this service will stop. This is made possible by an included Globa Media Control Service RXJS behavior subject that the components listen to for notification to stop when another player is going to play.

Projects

Spleeter Online - spleeter.online

Spleeter Online extracts the vocal stem from any mp3 or wav file. The service is an interface to Deezer's Spleeter stem separation library that uses Tensorflow with pretrained models written in Python.

Submit a project

If you have a project that you would like included in this list, please open an issue, submit a pull request or contact me at kennethmfire@gmail.com.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

This work is licensed under a BSD 3-Clause License.