Question

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

我无法找到绑定此事件的方法，我尝试在音频标签上添加onended，在我的组件中附加eventlistener，将player currentTime设置为0并且我真的不知道Angular是否有（）或[]关于这种状态的方式

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

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

检测音频何时停止播放：

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

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

但它确实不是棱角分明的方式。您可以创建指令并将其附加到音频标签。指令可能包含@Input，因此您可以定义ended事件应该执行的操作。

在指令中，您可以使用@HostListener('ended')

查看更多：https://angular.io/guide/attribute-directives#attribute-directives

Answer 2

一旦音频到达终点，诸如音频和视频之类的

媒体就会触发一个名为onended的事件。因此，您可以像这样将函数直接附加到组件控制器上的该事件。

通知音频标签元素上的事件（已结束）

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

Answer 3

试试这个方法...

    play(): void {
    this.player.play();
    this.player.onended = function() {
        alert("The audio has ended");
     };
  }

Angular - 检测音频结束

3 个答案: