Angular - Detect Ende von Audio

Question

Wenn Benutzer auf eine Schaltfläche klickt, spielt eine Funktion eine Audiodatei. Wenn diese Datei fertig ist, muss ich eine andere Funktion aufrufen.

Ich kann keinen Weg finden, dieses Ereignis zu binden, ich habe versucht, Audio-Tags hinzuzufügen, einen Eventlistener an meine Komponente anzuhängen, den Player currentTime auf 0 zu setzen und ich weiß nicht, ob Angular a() oder hat [] Weise, diesen Zustand zu warten

Was ist der beste/richtige Ansatz?

TEMPLATE:

<div class="telaJogo container-fluid" *ngIf="showJogo"> 
    <audio id="player"> 
     <source src="/assets/vaifilhao.mp3" type="audio/mp3"> 
     Your browser does not support the audio element. 
    </audio> 
    <img src="/assets/play.png" alt="play" (click)="play()"> 

SERVICE:

/** 
    Gera próxima música a ser tocada 
    */ 
    novaRodada(): void { 
    console.log('cheguei aqui'); 
    let player = <HTMLAudioElement>document.getElementById("player"); 
    player.src = '/assets/Queen - Love of My Life.mp3'; 
    player.play(); 
    } 

COMPONENT:

/** 
    Toca a contagem e gera próxima música 
    */ 
    play(): void { 
    this.player.play(); 
    this.player.currentTime = 0; 
    } 

    /** 
    Gera próxima música a ser tocada 
    */ 
    novaRodada(): void { 
    this.jogoService.novaRodada(); 
    } 

Answer 1

Erkennen, wenn Audio-Wiedergabe gestoppt:

const player = <HTMLAudioElement>document.getElementById("player"); 

Observable.fromEvent(player, 'ended').subscribe(console.log); 

Aber es ist wirklich kein eckiger Weg. Sie könnten eine Direktive erstellen und sie an ein Audio-Tag anhängen. Direktiven können @Input s enthalten, so dass Sie definieren können, was auf ended Ereignis geschehen soll.

In Richtlinie können Sie @HostListener('ended')

mehr nachschauen: https://angular.io/guide/attribute-directives#attribute-directives