Angular-Service zum Abspielen von Sound-Dateien mit howler

Um in Angular Sound-Dateien auf einer Webseite abzuspielen, kann man die howler-Bibliothek verwenden. Diese verwendet die Web Audio API und als Fallback HTML5 Audio.

Installation

npm install howler

Service

Um das Abspielen der Sound-Files zentral zu halten, empfiehlt es sich dafür einen einfachen Service zu schreiben:

import { Injectable } from '@angular/core';
import { Howl } from 'howler';

/**
 * Service for playing sound files
 *
 * @export
 * @class SoundService
 */
@Injectable()
export class SoundService {
  private soundFiles = {
    bell: './assets/sounds/bell.wav',
    ring: './assets/sounds/ring.wav'
  };

  constructor() { }

  public playBell() {
    this.playSound(this.soundFiles.bell);
  }

  public playRing() {
    this.playSound(this.soundFiles.ring);
  }


  private playSound(soundFile) {
    if (soundFile !== undefined) {
      const sound = new Howl({
        src: [soundFile]
      });
      sound.play();
    }
  }
}

Code-Sprache: JavaScript (javascript)

Anwendung

Im Constructor einer Komponente den Service einbinden:

constructor(protected soundService: SoundService) {}Code-Sprache: JavaScript (javascript)

Danach kann an beliebiger Stelle eine Audio-Datei abgespielt werden:

this.soundService.playBell();Code-Sprache: CSS (css)