-
Notifications
You must be signed in to change notification settings - Fork 1
Audio Service
Um Geräusche, Töne oder Musik über die Lautsprecher abzuspielen wird der AudioService genutzt. Der AudioService kann mp3-Dateien über den Browser abspielen.
Um den AudioService zu verwenden, muss der Service über einen Konstruktor der aufrufenden Komponente injiziert werden:
export class ParentComponent {
constructor(private audioService: AudioService) {}
}Der Service bietet folgende Funktionen um mit dem Sound zu arbeiten:
-
play(filePath)- Spielt eine Audiodatei einmalig ab -
playLoop(filePath)- Spielt eine Audiodatei in dauerschleife ab -
stopLoops()- Stoppt die Wiedergabe aller Audiodateien welche in dauerschleife laufen -
mute()- Schaltet den Ton stumm -
unmute()- Schaltet den Ton laut
Damit ambiente Hintergrundgeräusche bei einem Kapitel in dauerschleife abgespielt werden, kann beispielsweise in der ngOnInit Methode einer Komponente folgender Aufruf erfolgen:
ngOnInit(): void {
this.audioService.playLoop("assets/sounds/morgenmitvoegeln.mp3");
}Für Highlights mit Sounds, welche einmalig bei einem bestimmten Event abgespielt werden sollen, kann beispielsweise bei einem ScrollTrigger die play Methode aufgerufen werden:
gsap.to('#background', {
scrollTrigger: {
trigger: '.container',
start: 'top top',
scrub: true,
end: '+=600px',
onEnter: () => this.audioService.play("assets/sounds/chicken2.mp3")
},
opacity: 0
});- Sounds die mit
playLoopabgespielt werden, können gelayert werden und spielen gleichzeitig - Die Audiodateien werden aktuell mit den Assets mitgeliefert. Bei vielen und großen Dateien kann das beim Laden der Webseite für lange Ladezeiten sorgen. Um dieses Problem zu umgehen, sollte daher ein minimaler Server aufgestellt werden, welche die Benötigten Medien speichert und bei anfrage an den Web-Browser ausliefert, um so die Ladezeiten zu verkürzen und die Verarbeitung asynchron zu gestallten
Um den AudioService weiter zu entwickeln, können folgende Beitrage helfen: