Javascript 歌曲的进度条

我需要一个进度条，跟随歌曲的时间。如何在歌曲结束时设置进度条的结束时间

例如，如果我的歌曲的持续时间为4:38分钟，我如何为从单击到单击后4:38分钟的指定时间段创建进度条

 var progressBar = $('#progress-bar'),
 width = 0;

 progressBar.width(width);

 var interval = setInterval(function() {
    width += 10;
    progressBar.css('width', width + '%');

    if (width >= 100) {
       clearInterval(interval);
    }
  }, 1000)

---

谢谢。

4:38是4*60+38=278秒，这意味着每秒钟该条应移动1/278*100%

var step = 100/(minutes*60 + seconds);

var interval = setInterval(function() {
   width += step;
   progressBar.css('width', width + '%');

  if (width >= 100) {
     clearInterval(interval);
  }
}, 1000)

---

使用相关的HTML5媒体事件，如timeupdate和ended。 你可能会看到他们在行动

关于你的代码

var progressBar = $('#progress-bar'), width = 0;

progressBar.width(width);

$(audio).on('timeupdate',function(e){
  var progress = this.currentTime / this.duration;
  progressBar.css('width', progress*100+'%');
});

---

您可能不使用HTML5媒体。所以，无论如何，我不建议在这种情况下使用setInterval。使用类似于我上面介绍的方法。

以下是我通常的做法：

var player = new Audio('http://goo.gl/mGVqyF');

player.play();
var winWidth = window.innerWidth;
var timer = setInterval(function(){
     document.getElementById('timebar').style.width = player.currentTime
                                                    / player.duration
                                                    * winWidth +'px';
},100);

// stop the setInterval when song ended
player.addEventListener('ended',function(){
    clearInterval(timer);
});

它不会猜测何时结束，它会从当前时间和持续时间的玩家那里获取此信息

---

你怎么加载和播放这首歌？我没有一首真正的歌！我只是想模拟播放器，但对于真实的播放列表，我使用了以下框架：我认为您可能需要parens:progress*100+'%'onTimeUpdate的想法很好，但不幸的是，它的发生频率太高，您会出现延迟，尤其是在使用jQuery时。设置超时或间隔将有助于控制局面。2！字节的代码。乘法具有更高的优先级：@blex，据我所知，timeupdate每250毫秒触发一次。我不认为这是频率真的吗？哦，那我不知道为什么，但是当我使用这个项目时，我通常会出现滞后，但不会有间隔。太好了！这就是我需要的…但它不起作用！我不知道为什么，可能是css错了。我有很多问题要启动progressbar。