Non-Potable Macchiato


    2.1.1 • Public • Published

    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.



    Wavesurfer Component


    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';
      declarations: [
      imports: [
      providers: [],
      bootstrap: [AppComponent]
    export class AppModule { }

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


    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.


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


    <div id="waveservice"></div>
    <button (click)="">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]="''"></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


    <wavesurfer [trackurl]="''" [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:


    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)="">Play</button>
    <div id="myid"></div>


    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';
      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('', {container: '#myid'});


    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.


    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


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


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


    npm i angular-wavesurfer-service

    DownloadsWeekly Downloads






    Unpacked Size

    18.6 kB

    Total Files


    Last publish


    • kennethcaple