直接用CSS变量控制进度条会失效，因为CSS变量静态且calc不支持变量乘法运算，需JS动态设置style.width或setProperty配合calc(var(--p)*1%)并加边界保护和loadedmetadata守卫。
为什么直接用 CSS 变量控制进度条会失效
CSS 变量（--progress）本身是静态的，无法自动响应 <input type="range"> 或 audio.currentTime 的变化。你写 width: calc(var(--progress) * 100%) 是无效的——CSS 不支持在 calc 中对自定义属性做乘法运算，更不会监听 JS 修改后的变量值是否“生效”。浏览器只会在变量被 :root 或元素上显式重设时重新计算，但不会触发重绘进度条长度。
必须用 JS 动态更新 style 属性而非仅改 CSS 变量
真正起作用的是内联 style，不是变量本身。CSS 变量适合做主题色、圆角等低频切换项；进度条这种每秒可能更新 20+ 次的场景，应绕过变量，直接操作元素样式：
- 给进度条容器（如
.progress-track）设position: relative，内部.progress-fill设position: absolute; left: 0; top: 0; height: 100% - 在
timeupdate事件或input事件中，计算当前百分比：const percent = (audio.currentTime / audio.duration) * 100 - 直接设置：
fillEl.style.width = `${Math.max(0, Math.min(100, percent))}%`（加边界保护防 NaN 或超限）
如果坚持要用 CSS 变量做中间层，得配合 element.style.setProperty
可以保留变量名作为语义标识，但必须用 JS 触发真实渲染：
- 在
:root或播放器父元素上声明：:root { --progress-value: 0; } - JS 中不改
document.documentElement.style.cssText，而是：document.documentElement.style.setProperty('--progress-value', percent) - 然后在 CSS 中写：
.progress-fill { width: calc(var(--progress-value) * 1%); }（注意单位要拆开，%放在 calc 外面） - ⚠️ 注意：Safari 15.4 之前不支持 calc 中混用 CSS 变量和单位，建议降级为直接设 width
音频加载未完成时 duration 是 NaN，会导致进度条崩溃
这是最常被忽略的坑。刚创建 audio 元素或 src 未加载完成时，audio.duration 是 NaN，任何除法都会让 percent 变成 NaN，进而让 width 设成 "NaN%"，样式失效且控制台报错。
- 监听
loadedmetadata事件后再启用进度同步逻辑 - 在
timeupdate回调开头加守卫：if (isNaN(audio.duration) || isNaN(audio.currentTime)) return - 初始状态可设
.progress-fill { width: 0%; transition: width 0.1s linear; }，避免跳变
CSS 变量不是万能的动画代理，高频数值同步必须靠直接操作 style.width 或 transform: scaleX()。所谓“用变量控制”，本质是用 JS 当翻译官，把时间值翻译成浏览器能立刻响应的样式指令。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
