使用正在进行的音频文件跟踪 currentTime bar/element (Angular 4)

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 returns 0 的值是您开始每首歌曲的当前时间。

我想，我正在尝试随着歌曲的进行动态更改该值，并在进度条中直观地反映出来。

Answer 1

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

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

使用正在进行的音频文件跟踪 currentTime bar/element (Angular 4)

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

audio

progress

angular