Question

嘿，我需要在html 5中创建一个简单的玩家，我创建控制，播放，暂停，

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

这个例子是一个interarion bar，但我需要点击这个移动到音乐时间

 $('.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。乘以音轨的总持续时间，您将获得设置的新持续时间。

音频进度条html5与交互

1 个答案: