Angular - Detect end of audio

Question

When user clicks a button, a function plays an audio file. When this file is finished, I need to call another function.

I cannot find a way to bind this event, i've tried adding onended on audio tag, attach a eventlistener through my component, setting player currentTime to 0 and i don't really know if Angular has a () or [] way of biding this state

What is the best/correct approach?

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

medias like audio and video triggers an event called onended once the media has reach its end. So you can attach a function direct to that event on the controller of your component like this.

Notice the event (ended) on the audio tag element

audio.component.html

<audio (ended)="audioEnded()" preload="auto" #audioPlayer>
    <source [src]="pathToTheSource" type="audio/mp3">
</audio>

audio.component.ts

@ViewChild('audioPlayer') audioPlayer: ElementRef;

audioEnded(): void {
    console.log('ended!!')
}