两行JS代码搞定音频进度显示与控制

马黑黑

效果：

核心代码：

1. <!-- 水去云回 -->
2. <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2156517943" autoplay loop></audio>
3. <progress id="prog"></progress>
5. <script type="module">
6. aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
7. prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
8. </script>

复制代码

马黑黑

关于 H5 progress 标签

        这个标签早前介绍过也用过。它是进度显示标签，属性 max 即最大值，缺省默认为 1；属性 value 是当前进度值，缺省默认是 0 ，此时进度条会出现左右摇摆的进度显示。

关于音频进度和进度条的关系

        音频有几个重要数据：其一，duration，音频播放总时长；其二，currentTime，当前播放到的时间秒数。

        通过音频播放更新事件可以触发 progress 的 value 值更新，计算式子：音频当前播放时间 / 音频总时长。

        点击 progress 可以触发音频播放进度的改变，计算式子：progress 点击点偏移值（e.offsetX) 乘以音频总时长除以 progress 总长度。

小辣椒

这个我自己测试了一下，只能连下面的代码一起上去才有播放器效果和下面拉条一起显示，我不是MP3的音乐后缀，不知道是不是这个原因，晚上再试了

马黑黑

小辣椒 发表于 2025-9-5 13:21
这个我自己测试了一下，只能连下面的代码一起上去才有播放器效果和下面拉条一起显示，我不是MP3的音乐后缀 ...

音频地址合法就行。需要：

一、HTML代码
二、JS代码

HTML代码显示内容，JS代码负责页面的交互控制。

小辣椒

马黑黑 发表于 2025-9-5 13:40
音频地址合法就行。需要：

一、HTML代码

哦，那我不会做

亚伦影音工作室

以前我就看到过这个进度条，但我不会让他和音频关连，还是老师厉害&#128077;&#127995;！

马黑黑

小辣椒 发表于 2025-9-5 13:44
哦，那我不会做

马黑黑

亚伦影音工作室 发表于 2025-9-5 14:07
以前我就看到过这个进度条，但我不会让他和音频关连，还是老师厉害&#128077;&#127995;！

几个知识点：

进度条尺寸：一是它的长度，可以使用 元素id.clientWidth 或 元素id.offsetWidth 获取；二是它的点击点的X坐标值，具体指的是点击点的长度，e.offsetX 获取，e 是点击 click 事件指定的变量，例如 元素id.onclick = (e) => ...

音频相关：音频总时长 duration、音频当前播放时间 currentTime，音频播放时间更新事件 timeupdate、音频暂停与否 paused、音频播放事件 playing、音频暂停事件 pause，等等。

然后使用基本的初中数学运算建立音频与进度条的关系并驱动进度条的运行或驱动音频的播放节点。

梦江南

谢谢黑黑老师分享。

杨帆

简洁的代码，强大的功能，谢谢老师经典分享

马黑黑

杨帆 发表于 2025-9-5 16:46
简洁的代码，强大的功能，谢谢老师经典分享

马黑黑

梦江南 发表于 2025-9-5 16:05
谢谢黑黑老师分享。

杨帆

马黑黑 发表于 2025-9-5 18:09

马老师您好，如再能显示出音频总时长 duration、音频当前播放时间 currentTime就更完美了

位置可放在进度条两端或进度条一端，但“时间”与进度条之间最好留有适当空隙

马黑黑

杨帆 发表于 2025-9-5 19:33
马老师您好，如再能显示出音频总时长 duration、音频当前播放时间 currentTime就更完美了

位置可放在 ...

duration和currentTime数据是现成的，只需设计一个现实机制就行

杨帆

马黑黑 发表于 2025-9-5 19:34
duration和currentTime数据是现成的，只需设计一个现实机制就行

这个对我们来说想法很丰满，但实现很骨感呦

谢谢老师~期待老师创出一个完美实现机制……

马黑黑

杨帆 发表于 2025-9-5 19:39
这个对我们来说想法很丰满，但实现很骨感呦

谢谢老师~期待老师创出一个完美实现机制……{:4_ ...

这个早有了。本帖的目的不是那个。

杨帆

马黑黑 发表于 2025-9-5 19:45
这个早有了。本帖的目的不是那个。

是，本帖目的已实现，可进度能量化显示整体效果更完美

马黑黑

杨帆 发表于 2025-9-5 19:57
是，本帖目的已实现，可进度能量化显示整体效果更完美

那个以前实现过的

杨帆

马黑黑 发表于 2025-9-5 20:02
那个以前实现过的

是，好像代码量还是较大的

马黑黑

杨帆 发表于 2025-9-5 20:03
是，好像代码量还是较大的

就是秒数需要转换成分钟数，然后还得准备一个或两个元素显示时间