HTML5制作酷炫音频播放器插件图文教程

一、点击进度条的某一位置，计算该由进度条的起点到该位置的长度占总进度条长度的百分比值（例如点击进度条的正中间位置，则进度条的起点到该位置的长度占总进度条长度的50%），记为percentage。

二、然后用percentage乘以文件的总时间长度duration就得到了你想要跳跃到的时间点的值，再把该值赋给currentTime即完成了所要实现的功能。

复制代码
$(".time_line .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var percentage = (posX - targetLeft)/140 * 100;
myAudio.currentTime = myAudio.duration * percentage / 100;
});

到这里，播放器已经基本成型了。剩下一些无关痛痒（其实对我来说才是最重要的哈哈）的UI交互实现，如果大家有兴趣的话就到源码中查看吧，有问题可以在下方评论留言，希望能多多交流和学习。