Wavesurfer.js: It doesn't support Angular 2

[TopDev130]

Hi,

I was going to add it to my angular 2 project, but I am not sure it supports Angular 2.
I have used systemjs in the project, but it has an issue while integrating this library.

Please let me know how I can add it to angular 2 project.
Sincerely,
Thomas

[mspae]

@topmobiledeveloper130 Wavesurfer.js is a framework-independent library. As such it can be used with any frontend framework you want. It isn't specifically geared towards Angular 2 and so you will need to write a component/service which interfaces with it (like http://github.com/mspae/react-wavesurfer does for React) in order to use it.

Regarding your systemjs difficulties: Can you describe the steps you took to integrate wavesurfer.js – which versions are you using? – What error message do you get?

[thijstriemstra]

no feedback.

[logavdm]

hi guys need further steps to integrating with angular 2. I need help..?

[kyr0]

Fairly simple. There is no need for a wrapper package. Just install it like this:

   npm install --save wavesurfer.js

I'm using 2.0.0-beta02.

Then put the following code on top of the .ts file where you want to use it:

import * as WaveSurfer from 'wavesurfer.js';

Make sure you put your API call inside of requestAnimationFrame() and all of that inside of ngAfterViewInit().

    requestAnimationFrame(() => {

        const wavesurfer = WaveSurfer.create({
          container: '#myWavesurferContainer',
          waveColor: 'violet',
          progressColor: 'purple'
        });
      });

...especially if you are working with dynamically generated HTML inside of a template.

Your template must contain an element with a proper id reference, like hat:

<div id="myWavesurferContainer"></div>

Do not forget to call the .load() method (below the const wavesurfer declaration, inside of the requestAnimationFrame callback):

wavesurfer.load('audio.wav');

@thijstriemstra @mspae You probably want to put an example to docs/website etc? I'm willing to volunteer.

[mspae]

@kyr0 Sure. Go ahead. :) (BTW container can also be a rendered HTMLElement, that way you don't need unique IDs)

[robruiz]

Hi all. Having the hardest time implementing this thing in an Ionic 3 project. I keep getting

Uncaught Error: Can't resolve all parameters for n: (?).

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

/**
 * Generated class for the WavesurferComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'wavesurfer',
  templateUrl: 'wavesurfer.html',
  providers: [WaveSurfer]
})
export class Wavesurfer implements AfterViewInit {

  constructor(/*WaveSurfer: WaveSurfer*/) {

  }

    ngAfterViewInit() {
        requestAnimationFrame(() => {

            const wavesurfer = WaveSurfer.create({
                container: '#waveform',
                waveColor: 'violet',
                progressColor: 'purple'
            });
            wavesurfer.load('');
        });

    }

}

[sdrh]

Hi all. Having the hardest time implementing this thing in an Ionic 3 project. I keep getting

Uncaught Error: Can't resolve all parameters for n: (?).

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

/**
 * Generated class for the WavesurferComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'wavesurfer',
  templateUrl: 'wavesurfer.html',
  providers: [WaveSurfer]
})
export class Wavesurfer implements AfterViewInit {

  constructor(/*WaveSurfer: WaveSurfer*/) {

  }

    ngAfterViewInit() {
        requestAnimationFrame(() => {

            const wavesurfer = WaveSurfer.create({
                container: '#waveform',
                waveColor: 'violet',
                progressColor: 'purple'
            });
            wavesurfer.load('');
        });

    }

}

delete this: providers: [WaveSurfer]

[pouletfou]

For those interested, simple player component with Material Components

wavesurfer-material.component.ts

import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import * as WaveSurfer from 'wavesurfer.js';

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

  wavesurfer;
  @Input() url: string;
  @ViewChild('wavesurfer') ws: ElementRef;
  @Input() waveColor = '#0F0';
  @Input() progressColor = '#00F';
  @Input() cursorColor = '#CCC';
  progress = 0;
  playing = false;

  constructor(private ref: ChangeDetectorRef) {

  }

  ngOnInit() {
  }
  ngAfterViewInit() {

    requestAnimationFrame(() => {
      this.wavesurfer = WaveSurfer.create({
        container: this.ws.nativeElement,
        waveColor: this.waveColor,
        progressColor: this.progressColor,
        cursorColor: this.cursorColor,
        height: '40'
      });
      this.wavesurfer.load(this.url);
      this.wavesurfer.on('play', () => {
        this.playing = true;
      });
      this.wavesurfer.on('pause', () => {
        this.playing = false;
      });
      this.wavesurfer.on('finish', () => {
        this.playing = false;
        this.wavesurfer.seekTo(0);
        this.progress = 0;
        this.ref.markForCheck();
      });
      this.wavesurfer.on('audioprocess', () => {
        this.progress = this.wavesurfer.getCurrentTime() / this.wavesurfer.getDuration() * 100;
        this.ref.markForCheck();
      });
    });
  }


  playPause() {
    if (this.wavesurfer && this.wavesurfer.isReady) {
      this.wavesurfer.playPause();
    }
  }

}

wavesurfer-material.component.html

<mat-toolbar class="material-wavesurfer" [ngClass]="{'playing':playing}">
  <button mat-icon-button (click)="playPause()">
    <mat-icon >{{playing ?'pause':'play_arrow'}}</mat-icon>
  </button>
  <div class="ws" >
    <mat-progress-bar
      mode="determinate" [value]="progress"></mat-progress-bar>
    <div #wavesurfer></div>    
  </div>  
</mat-toolbar>

wavesurfer-material.component.scss

:host /deep/ .material-wavesurfer {

  .mat-icon { color: #00F;}      
  .ws { height: 100%; flex: 1; position:relative;
    .mat-progress-bar{
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      bottom:0;
      left: 0;
      right: 0;
      .mat-progress-bar-fill {
        transition: none;
        &::after{
          background-color: rgba(#00F,0.2);
        }        
      }
      .mat-progress-bar-background{
        fill: transparent;

      }
      .mat-progress-bar-buffer {
        background: transparent;
      }
    }
  }
  padding-right: 0;
  padding-left: 0;
  height: 40px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;

  &.playing {
    .mat-icon { color: #00F;}      
  }
}