Jquery 如何制作音频播放器的条形图

我的问题是，

result\u sect

不正确，每次音频结束时，白条都不会按时结束，它会早晚结束

我怎样才能解决这个问题

$（'.play'）。在（'click'，function（）上{
$audio=$（'audio'）；
$audio.trigger（'play'）；
持续时间=$audio.duration；
//这可能是错误的公式
结果_sect=sect=duration/100；
播放间隔=设置间隔（函数（）{
如果（结果>=100）{
clearInterval（播放时间间隔）；
}
$（'.time passed'）.css（'width'，result_sect+'%'）；
结果_段=结果_段+段；
}结果(u组),；
});

.time容器{
背景色：#f00；
高度：8px；
宽度：80%；
位置：相对位置；
}
.时间流逝{
背景色：#fff；
高度：6px；
位置：绝对位置；
顶部：1px；
左：0px；
}

audioelement有一个timeupdate事件，您应该使用它来更新进度条的宽度。您不应该为此使用设置超时

也可以考虑使用<代码> <代码>标签，而不是div.t/p>

$（'#play'）。在（'click'，function（）上{
document.getElementById（'player'）.play（）；
});
$（'#pause'）。在（'单击'，函数（）上）{
document.getElementById（'player'）.pause（）；
});
$（'#player'）。在（'timeupdate'，function（）上{
$（'.time passed'）.css（“width”，this.currentTime/this.duration*100+'%”）；
});
.time容器
{
背景色：#f00；
高度：8px；
宽度：80%；
位置：相对位置；
}
.时间流逝
{
背景色：#fff；
高度：6px；
位置：绝对位置；
顶部：1px；
左：0px；
}

玩
暂停
您必须找到修改当前进度并以宽度显示在进度条上的比率：

  currentProgressBarLenght = currentTime * 100 / duration

例如，如果你有一个360秒的音频，已经支付了36秒，你会在进度条上得到一个10的宽度。currentProgresBarlength=36s*100/360，这使我们达到10px或任何值。
result\u sect=playing\u interval*100/duration