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

红影

这个厉害了，只要当前时间和总时间的比例，就能给出进度位置，且进度可调，这么复杂的操纵只能用两行代码就搞定了，太厉害了

杨帆

马黑黑 发表于 2025-9-5 20:15
就是秒数需要转换成分钟数，然后还得准备一个或两个元素显示时间

是，不知能否像您这个进度条控制代码一样：简洁而强大

红影

尤其那个点击改变进度，记得需要很多句才能对应上，这里只要一句，这么简洁而且实现效果挺好，非常神奇

花飞飞

矮油，这里有进度条的专项说明书。。
两行就能显示和控制，
平时是字越少，事儿越大。。
这个代码l虽少，功能一点也没落下。。

花飞飞

给白老师点个赞。。就撤了。。

马黑黑

花飞飞 发表于 2025-9-5 21:32
给白老师点个赞。。就撤了。。

88

马黑黑

花飞飞 发表于 2025-9-5 21:32
矮油，这里有进度条的专项说明书。。
两行就能显示和控制，
平时是字越少，事儿越大。。

马黑黑

红影 发表于 2025-9-5 20:23
尤其那个点击改变进度，记得需要很多句才能对应上，这里只要一句，这么简洁而且实现效果挺好，非常神奇{:4_ ...

也不需要很多句，同样的计算。这里的简洁在于连百分比都不用，因为 progress 标签 Max 默认是1

马黑黑

杨帆 发表于 2025-9-5 20:20
是，不知能否像您这个进度条控制代码一样：简洁而强大

你说的这些功能在过去的系列教程里都有个实现方法，可以去查查

马黑黑

红影 发表于 2025-9-5 20:20
这个厉害了，只要当前时间和总时间的比例，就能给出进度位置，且进度可调，这么复杂的操纵只能用两行代码就 ...

这得益于 progress 的默认属性值，因此计算时无需太多的参数参与

杨帆

马黑黑 发表于 2025-9-5 22:05
你说的这些功能在过去的系列教程里都有个实现方法，可以去查查

老师系列教程内容很丰富，请老师推荐一二个呀，谢谢

马黑黑

杨帆 发表于 2025-9-5 22:08
老师系列教程内容很丰富，请老师推荐一二个呀，谢谢

千山专门将到音频控制的

杨帆

马黑黑 发表于 2025-9-5 22:09
千山专门将到音频控制的

是的，可不记得有关于音频播放时间显示的教程呀

马黑黑

杨帆 发表于 2025-9-5 22:12
是的，可不记得有关于音频播放时间显示的教程呀

里面有

杨帆

马黑黑 发表于 2025-9-5 22:15
里面有

您的这个讲义在千山与花潮里内容不完全一样？

好的，我再找找看。谢谢老师

花飞飞

马黑黑 发表于 2025-9-5 22:03
88

我又回来了，刚看到新贴，还是这个两行代码的音频，回来啃一下教程。。

马黑黑

花飞飞 发表于 2025-9-6 11:05
我又回来了，刚看到新贴，还是这个两行代码的音频，回来啃一下教程。。

这个简单吧？需要的基础：

1. 获取音频总时长、当前播放时间；
2. 获取元素的长度（就是宽度）；

3. 列一两个学前班计算百分比的算式（其实progress标签max默认是1，缺省时无需转换百分比，但原理一样）

马黑黑

花飞飞 发表于 2025-9-5 21:32
给白老师点个赞。。就撤了。。

88

花飞飞

马黑黑 发表于 2025-9-5 22:04

aud.ontimeupdate = () => prog.value=aud.currentTime/aud.duration;
这是第一句，当前播放的秒数除以音频总长，得到一个新数据，value值一更新，音频就发生变化。。

prog.onclick = (e) => aud.currentTime=aud.duration*e.offsetX/prog.offsetWidth;
第二句是aud.currentTime当前播放秒数是怎么来的，
用总长*点击宽度和总宽度的比值
得到时间后，传给上面的那句实现播放。

我天天在学算术。。

花飞飞

马黑黑 发表于 2025-9-6 11:09
这个简单吧？需要的基础：

1. 获取音频总时长、当前播放时间；

简单简单，我可真不敢说简单。。
把每句看懂就不容易了，还要两句互相影响。。
其实是先有第二句，再有第一句对吧。。
下面的工式，先得到点击宽度和总宽度的比值，再乘音频总长对吧。。
全是反 着写的。