Track currentTime with Audio file in Progress bar/element (Angular 4)

Question

So I am making a music player. When a user clicks on a song, I would like a progress bar to visualize where the current time is on the audio file. This is what i have so far:

HTML (player.component.html)

<progress value="{{songTime}}" max="100"></progress>

Typescript (player.component.ts)

paused: boolean = true;
  songInfo: any = "lol";
  songFile: any = "";
  songTime: any = "";
  audio = new Audio();

  playSong(){
    this.audio.src = this.songFile;
    this.audio.play();
    this.songTime = this.audio.currentTime;
    console.log(this.songTime)
    this.paused = false;
  }

This console.log returns the value of 0 which is the current time when you start each song.

I am trying to, I guess, dynamically change that value as the song progresses and have that reflect visually in the progress bar.

Answer 1

You just need to add a timeupdate event listener to the audio player.

this.audio.addEventListener("timeupdate", (currentTime)=>{
// Code to update progress bar goes here
});