Media Plugin - Update button display with audio status change


#1

I have to develop an audio recording feature and for this I’m using Media plugin.

I have these 2 buttons on my screen:

      <button *ngIf="!estaTocando" ion-button round small color="primary" (click)="reproduzirAudio()"><ion-icon name="play"></ion-icon></button>
      <button *ngIf="estaTocando" ion-button round small color="primary" (click)="pausarReproducaoAudio()"><ion-icon name="pause"></ion-icon></button>

They are displayed based on the ‘estaTocando’ boolean. If true, display the pause button. If false display the play button.

It’s working fine for click events, but not for when the audio stops playing after the end of the audio is reached upon playback.

this.audio.onStatusUpdate.subscribe(status => this.onAudioStatusUpdate(status));

  onAudioStatusUpdate (status: MEDIA_STATUS){
    console.log('Audio status update: '+status);
    if(status == MEDIA_STATUS.PAUSED || status == MEDIA_STATUS.STOPPED){
      this.definirEstaGravando(false);
      this.definirEstaTocando(false);
      this.pararAtualizacaoDeDuracaoDeAudio();
      this.pararTimerDeAudio();
    }
  }

This onAudioStatusUpdate function is called by the plugin when the audio status is changed. In this case, if the audio is paused or stopped I want the play button to be displayed setting the ‘estaTocando’ variable to false, but the pause button keeps being displayed in place of play button, even though it shouldn’t.

Any thoughts??

Thanks in advance.