原生<audio>控件需加controls属性才显示音量滑块；多格式需按mp3→ogg顺序写source；JS创建Audio无UI；range滑块用min="0" max="100" step="1"并监听input事件；muted与volume须解耦；volume设置须等loadedmetadata后。
直接用 <audio> 标签加 controls 属性，就能显示原生音量滑块——不需要 JS 也能工作；但想自定义滑块行为、同步多个音频或修复移动端拖动卡顿，就得手动接管。
为什么原生 controls 滑块有时不生效
常见错误是没加 controls 属性：不加它，浏览器根本不会渲染任何控件，哪怕写了 autoplay 或 loop，用户也点不了、调不了。另一个坑是音频文件路径错误或格式不被支持（比如只提供 .mp3，但在 Firefox 中 fallback 失败），导致控件加载后静默无响应。
- 必须写
<audio src="music.mp3" controls></audio>，缺controls就等于没控制入口 - 多格式兼容要按顺序写
<source src="x.mp3" type="audio/mpeg">→<source src="x.ogg" type="audio/ogg">，否则某些浏览器会跳过可用格式 - 如果用 JS 动态创建
Audio实例（如new Audio("x.mp3")），它默认没有 UI，controls属性无效，只能靠代码控制
<input type="range"> 音量滑块的正确参数配置
别用 min="0" max="1" step="0.01"——iOS Safari 拖动容易卡住，Chrome 对 step="0.01" 渲染也不一致。统一用整数百分比映射，再除以 100 赋值给 volume，既稳定又避免浮点误差。
- HTML 滑块必须设：
<input type="range" min="0" max="100" step="1" value="100"> - 监听
input事件（不是change），确保拖动过程实时响应 - JS 赋值时：
audio.volume = parseInt(range.value) / 100，强制转整再除，防字符串误赋 - 移动端加
style="touch-action: pan-y;"，避免拖动时触发页面滚动
音量和 muted 状态必须解耦处理
audio.muted = true 会覆盖所有 volume 设置，哪怕你刚设了 volume = 0.8，静音一开就归零。UI 上滑块也不能禁用——用户常想先调好音量，再点静音按钮。
立即学习“前端免费学习笔记（深入）”；
- 静音按钮点击时只设
audio.muted = true，不碰volume - 取消静音时设
audio.muted = false，再恢复之前缓存的lastVolume值 - 滑块
value始终反映真实audio.volume * 100，静音状态用图标灰显提示，而非禁用输入 - 监听
volumechange事件时，要对比当前audio.volume和上次记录值，防止系统级静音切换触发重复 UI 更新
最易被忽略的是 readyState：在 loadedmetadata 事件触发前设置 volume，Safari 和部分 WebView 会直接丢弃。哪怕滑块 UI 看起来动了，实际 audio 元素的 volume 还是初始值 1.0。务必等元数据加载完成再初始化音量，或把首次设置放在用户交互（如点击播放）之后。
