带有交互的音频进度条 html5

Posted 2023-02-25

【中文标题】带有交互的音频进度条 html5

【英文标题】：Audio Progress Bar html5 with interaction

【发布时间】：2015-06-30 22:44:17

【问题描述】：

嘿，我需要在 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();
            );

【问题讨论】：

这里没有人会为您编写整个播放器...但是如果您将播放音频和其他所有需要的内容放入您的示例中，我们将非常乐意提供帮助。

这能回答你的问题吗？ Custom progress bar for <audio> and <progress> HTML5 elements

【参考方案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。将其乘以音轨的总时长，您将获得要设置的新时长。