歌曲Progress_bar

Question

我需要一个跟踪歌曲时间的progress_bar。在歌曲结束的那一刻，我如何设置progress_bar的结束时间？

例如。如果我的歌曲持续时间为4:38分钟，我如何为这段时间(从单击到4:38分钟)创建一个progress_bar？

 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)

谢谢。

Answer 1

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)

Answer 2

以下是我通常做的事情：

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);
});

它不知道什么时候结束，它从currentTime和duration玩家那里获取这个信息。

​

JS Fiddle Demo

​

Answer 3

使用相关的HTML5媒体事件，如timeupdate和ended。你可以在http://www.w3.org/2010/05/video/mediaevents.html看到他们的行动

关于您的代码，它就像

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。使用与我上面展示的方式类似的方法。