ngx-howler
    TypeScript icon, indicating that this package has built-in type declarations

    11.0.0 • Public • Published

    ngx-howler

    Audio library based on howler.js for Angular

    npm Downloads TypeScript GitHub license

    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');
      }
    }

    Install

    npm i ngx-howler

    DownloadsWeekly Downloads

    58

    Version

    11.0.0

    License

    MIT

    Unpacked Size

    27.3 kB

    Total Files

    16

    Last publish

    Collaborators

    • -kain