jquery - 互动音频进度栏html5

Question

嘿，我需要在html 5中创建一个简单的播放器，然后创建控制权，播放权，暂停权，

但是我需要一个带有进度条的进度条

这个例子是一个interarion bar，但是我需要单击，然后转到音乐时间

http://jsfiddle.net/LQqGS/3/

 $('.clickable').bind('click', function (ev) {
                var $div = $(ev.target);
                var $display = $div.find('.display');

                var offset = $div.offset();
                var x = ev.clientX - offset.left;

                $('.progress').width(x);
            });

            $("#pause").click(function() {
                audioElement.pause();
            });

Answer 1

您已经完成了大部分工作。您现在需要做的是更改音频播放器的currentTime值。以秒为单位的值。

由于您已经具有单击的X位置，因此可以将其除以进度条的宽度，以获得应播放的歌曲的百分比。

您具有audio元素的duration属性，该属性返回当前正在播放的音频文件的长度(以秒为单位)。

var duration = player.duration;
var ratio = X / progressBar.width(); 
var newCurrentTime = ratio * duration.
player.currentTime = newCurrentTime;

只是一个简单的例子，用适当的值替换变量名。

假设您的进度条正好是100px宽，并且您计算的是点击发生在50px处，比率为50/100，即0.5。将其乘以音频轨道的总持续时间，即可得到要设置的新持续时间。