Angular - 检测音频结束

Question

当用户单击按钮时，函数会播放音频文件。当这个文件完成后，我需要调用另一个函数。

我找不到绑定(bind)此事件的方法，我尝试在音频标签上添加 onended，通过我的组件附加事件监听器，将播放器 currentTime 设置为 0，我真的不知道 Angular 是否有 () 或 [ ] 这种状态的方式

什么是最好/正确的方法？

模板:

    <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()">

服务:

    /**
    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();
  }

组件:

/**
    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

一旦媒体到达终点，像音频和视频这样的媒体就会触发一个名为 onended 的事件。因此，您可以像这样在组件的 Controller 上将函数直接附加到该事件。

注意音频标签元素上的事件(结束)

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!!')
}