如何根据进度变化改变进度条的颜色。

Question

如何根据音频进度变化改变进度条的颜色（比如：音频播放了一分钟，进度条上前一分钟对应的颜色变为蓝色，还没有播放的部分进度条还是最之前的颜色），求JavaScript代码。（已经试过好多种办法，但是还是不行—.—）

Answer 1

你只需要两个div重叠，底部一种颜色100%宽，顶部根据数据改变宽度就行了

Answer 2

这不是自带功能吗？白色是已播放的，灰白色是缓存的，灰色是未缓存的

在chrome里面，你可以通过他自带的一些选择器来搞定

当然，还是有搞不定的情况，那么只能你自己做一个进度条了
![上传中...]()

Answer 3

这个的原理不麻烦，但实现其实需要专门设计进度条的控制，大致是

1. 进度条部分分成已播放和未播放的部分两个子块
2. 子块的宽度由播放进度计算分别的比例，再转换为具体的宽度值
3. 分别设置已播放子块和带播放子块的填充颜色