带有交互的音频进度条 html5

Question

嘿，我需要在 html 5 中创建一个简单的播放器，我创建了 de control、play、pause，

但我需要一个带交互的进度条

这个例子是一个 interarion 酒吧，但我需要点击并进入音乐时间

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 位置，您可以将其除以进度条的宽度，以获得应播放歌曲的百分比。

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

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

这只是一个简单的示例，将变量名替换为相应的值。

假设您的进度条正好是 100 像素宽，并且您正在计算点击发生在 50 像素处，比率将是50/100，所以0.5。将其乘以音轨的总时长，您将获得要设置的新时长。