WaveSurfer RxJS

Angular service that provides RxJS observables for most of the standard WaveSurfer.js events, plus other useful observables.

Demos

• Homepage

Usage

Documentation is on the way, but something along the lines of ...

import { NgxWavesurferService } from 'ngx-wavesurfer';
import {
  WaveSurferRxJSEventObservables,
  WaveSurferRxJSEventSubscriptions,
} from '../interfaces';
import { WaveSurferRxJSService } from '../wsrxjs.service';

@Component({
  selector: 'app-wave-surfer-rx-js',
  templateUrl: './wave-surfer-rx-js.component.html',
  styleUrls: ['./wave-surfer-rx-js.component.scss'],
})
export class WaveSurferRxJSComponent implements OnInit {
  wave: WaveSurfer;
  waveSurferRxJS: WaveSurferRxJSEventObservables = {};

  constructor(
    public waveService: NgxWavesurferService,
    public waveSurferRxJSService: WaveSurferRxJSService
  ) {}
  ngOnInit() {
    this.wave = this.waveService.create({
      container: '#basetemplate',
    });
    this.waveSurferRxJS = this.waveSurferRxJSService.getRxJSWave(this.wave);
    this.wave.load(
      '//www.kennethcaple.com/api/mp3/richinlovemutedguitarechoing.mp3'
    );

  }
  stop() {
    this.wave.stop();
    this.waveSurferRxJSService.stop();
  }
  ngOnDestroy(): void {
    this.waveSurferRxJSService.unsubscribeAll();
  }
}