@libertymp/ngx-howler

ngx-howler

Audio library based on howler.js for Angular

Setup

npm install ngx-howler --save

Configuration

Load howler.js library, you can use local or external CDN

export class AppModule {
  constructor(
    ngxHowlerService: NgxHowlerService
  ) {
    ngxHowlerService.loadScript('https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.0/howler.min.js');
  }
}

Usage

Register an audio object

export class ExampleComponent implements OnInit {
  constructor(
    public howl: NgxHowlerService
  ) {
  }

  ngOnInit() {
    this.howl.register('dev', {
      src: ['sound.mp3'],
      html5: true
    }).subscribe(status => {
      // ok
    });
  }
}

Play this audio object

export class ExampleComponent implements OnInit {
  constructor(
    public howl: NgxHowlerService
  ) {
  }

  play() {
    this.howl.get('dev').play();
  }
}

If howler's listen event is used, you need to manually cancel the listen when the page is destroyed

export class ExampleComponent implements OnInit {
  constructor(
    public howl: NgxHowlerService
  ) {
  }

  ngOnInit() {
    this.howl.get('dev').on('load', () => {
      // ...
    });
  }

  ngOnDestroy() {
    this.howl.get('dev').off();
  }
}

Unregistered audio object

export class ExampleComponent implements OnInit {
  constructor(
    public howl: NgxHowlerService
  ) {
  }

  unregister() {
    this.howl.unregister('dev');
  }
}