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

ccpizza · Accepted Answer · 2021-08-16 11:03:04Z

4

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

edited Aug 16, 2021 at 11:03

ccpizza

32.4k24 gold badges186 silver badges195 bronze badges

answered Aug 26, 2019 at 15:47

Daniel Torres Laserna

4244 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nishit Raval · Accepted Answer · 2021-06-24 14:06:33Z

3

Try this way...

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

answered Jun 24, 2021 at 14:06

Nishit Raval

671 silver badge6 bronze badges

Comments

ccpizza · Accepted Answer · 2021-08-16 11:02:34Z

1

Detecting when audio stopped playing:

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

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

But it's realy not angular way. You could create directive and attach it to audio tag. Directives may contain @Inputs so you can define what should be do on ended event.

In directive you can use @HostListener('ended')

See more: https://angular.io/guide/attribute-directives#attribute-directives

edited Aug 16, 2021 at 11:02

ccpizza

32.4k24 gold badges186 silver badges195 bronze badges

answered Dec 28, 2017 at 10:37

morriq

4243 silver badges14 bronze badges

1 Comment

morriq Over a year ago

AudioModel is already declared as HTMLAudioElement. It contains all stuff such as play, paused etc. see: webplatform.github.io/docs/dom/HTMLAudioElement

Collectives™ on Stack Overflow

Angular - Detect end of audio

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related