原生<audio>音量交互需手动接管volume和muted属性：①用Math.pow(value/100,2)做非线性映射；②监听input事件实现实时响应；③静音与音量值分离管理并缓存；④首次交互前需用户手势解锁音量权限。
原生 <audio> 的 controls 属性开箱即用，但真要自定义音量交互——比如换旋钮、加静音记忆、适配触屏——就得绕过默认控件，亲手接管 volume 和 muted 两个属性。
audio.volume 是线性值，但人耳感知是非线性的
直接把 range 的 value（0–100）除以 100 赋给 audio.volume，会导致低音量段变化太敏感（0→10% 听感剧烈），高音量段几乎没反应（90→100% 难察觉）。这不是 bug，是费希纳定律在起作用。
- 推荐映射方式：
audio.volume = Math.pow(value / 100, 2)，平方压缩让中低段更平缓 - 若用 Web Audio API，
gainNode.gain.setValueAtTime()同样要传处理后的值，别直接扔原始百分比 - UI 上仍显示整数百分比（如“65%”），但内部计算用非线性值，用户感知才一致
range 输入框必须用 input 事件，不是 change
change 只在松手后触发一次，拖动过程中 UI 和音频不同步；input 才能实时响应每一次滑动位移。
- 移动端尤其关键：iOS Safari 对
change延迟明显，用户拖半天没反馈，以为坏了 - 别写
e.preventDefault()—— 它会意外阻止range的默认拖拽行为 - 如果滑块嵌套在有
transform的容器里，Android Chrome ≤115 可能跳变，临时加style="will-change: transform"到滑块本身
静音状态和 volume 值要分开管理
audio.muted 和 audio.volume 是两个独立开关。设 muted = true 不会改 volume 值，取消静音时必须手动恢复，否则永远是 0。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 每次调音量前先检查：
if (audio.muted) audio.muted = false - 点静音按钮只设
audio.muted = true，同时缓存当前audio.volume到变量（如lastVolume） - 取消静音时设
audio.muted = false，再赋audio.volume = lastVolume - 滑块 UI 永远显示真实
volume值，静音时加灰显图标即可，别禁用滑块——否则用户无法“滑出来”
首次交互前音量可能被浏览器锁死
Safari iOS、Chrome 移动端等会在页面加载后禁止自动修改音量，直到用户有明确手势（点击、触摸）触发过播放或操作。
- 初始化时设
audio.muted = true，避免无交互下volume设置无效 - 首次点击播放/音量按钮时，先调
audio.play().then(() => { audio.muted = false; }) - 别依赖
loadedmetadata事件后再设初始音量——它不解决权限问题，只是确保元数据就绪
旋钮类组件看着炫，但核心逻辑逃不开这四点：非线性映射、事件时机、静音/音量解耦、首交权限。漏掉任意一个，用户就会觉得“调不动”“卡顿”“点了没反应”。
