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
|
1 |
npm install howler |
Service
Um das Abspielen der Sound-Files zentral zu halten, empfiehlt es sich dafür einen einfachen Service zu schreiben:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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(); } } } |
Anwendung
Im Constructor einer Komponente den Service einbinden:
|
1 |
constructor(protected soundService: SoundService) {} |
Danach kann an beliebiger Stelle eine Audio-Datei abgespielt werden:
|
1 |
this.soundService.playBell(); |
