javascript - 歌曲进度条

Question

我需要一个跟随歌曲时间的进度条。如何在歌曲结束时准确设置 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

这是我通常做的:

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