Jquery 具有交互功能的音频进度条html5

嘿，我需要在HTML5中创建一个简单的播放器，我创建去控制，播放，暂停

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

这个例子是一个内部的酒吧，但我需要点击这个移动到音乐时间

---

你已经完成了大部分工作。您现在需要做的是更改音频播放器的

currentTime

值。它是以秒为单位的值

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

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

音频元素具有

duration

属性，该属性返回当前播放的音频文件的长度（以秒为单位）

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

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

---

假设您的进度条宽度正好为100px，并且您正在计算单击发生在50px，比率将为

50/100

，因此

0.5

。将其乘以音频曲目的总持续时间，您将获得要设置的新持续时间。

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