使用进度条/元素（Angular 4）中的音频文件跟踪currentTime

Question

所以我正在制作音乐播放器。当用户点击一首歌时，我想要一个进度条来显示当前时间在音频文件上的位置。这是我到目前为止：

HTML（player.component.html）

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

打字稿（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;
  }

此console.log返回值0，这是您开始播放每首歌曲时的当前时间。

我想，我试图在歌曲进展时动态改变该值，并在进度条中直观地反映出来。

Answer 1

您只需要向音频播放器添加一个timeupdate事件监听器。

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