应使用 而非 实现音频播放条，因其支持拖拽、无障碍及跨平台兼容；Bootstrap 的 form-range 提供基础样式，需配合 touch-action: manipulation、扩大点击区域、节流 timeupdate 等优化 iOS 体验。
用 Bootstrap 5 的进度条组件模拟音频播放条
Bootstrap 本身不提供原生音频控件样式，但可以用 progress + range 组合手动还原播放条的视觉与交互。关键不是“套 Bootstrap 类”，而是借它的栅格、间距和基础样式快速对齐，再用原生 HTML5 <input type="range"> 实现拖拽和精度控制。
常见错误是直接给 <progress></progress> 标签加 Bootstrap 类——它在多数浏览器里不可样式化（尤其是 iOS Safari），且无法响应拖拽。必须用 <input type="range">。
- 用
form-range类获得 Bootstrap 5 默认的 range 样式（圆角、滑块大小适配移动端） - 配合
col-12或px-3控制左右留白，避免 iOS 上滑块被截断 - 禁用默认 outline：加
outline: none到自定义 CSS，否则点击后蓝框遮挡滑块 - 为 iOS 优化：加上
-webkit-appearance: none和appearance: none，否则 range 在 Safari 中不可见或错位
适配 iPhone / iPad 的触摸响应与尺寸
iOS 对 input[type="range"] 的点击区域极小，原生滑块直径仅 12px，手指根本点不准。必须放大可点击区域，又不能破坏视觉比例。
正确做法是保持滑块视觉大小不变，但用 ::before 或外层 div 扩展 hit area：
- 给 range 外包一层
<div class="position-relative">，再用绝对定位盖一个透明 <code>div（高 44px，iOS 最小触控区） - 或直接加大
height和padding，但需重置background避免填充色溢出 - 务必设
touch-action: manipulation，防止 iOS 滚动误触发 - 不要依赖
pointer-events: none在滑块上——它会禁用所有拖拽行为 -
audio.duration初始为NaN，需等loadedmetadata后才可用，否则 range max 设为 0 - 拖拽时要暂停播放（
audio.pause()），松手再play()，否则 iOS 会静音或报错NotAllowedError - range 的
input事件在拖拽中高频触发，但audio.currentTime赋值有延迟，建议加requestAnimationFrame节流 - 时间格式化别用
Math.floor粗暴取整：用new Date(1000 * seconds).toISOString().substr(14, 5)更稳
同步播放进度与时间显示（不用 jQuery）
音频实际播放靠 <audio></audio> 元素，播放条只是它的 UI 映射。核心逻辑是监听 timeupdate 事件更新 range 的 value，同时监听 range 的 input 事件跳转时间。
容易忽略的坑：
为什么不用 Bootstrap 自带的 progress bar？
因为 <div class="progress"><div class="progress-bar"></div></div> 是只读的视觉反馈，无法接收触摸拖拽，也不能双向绑定时间值。它适合加载状态，不适合控制媒介。
真正在手机端能用的只有 <input type="range"> —— 它是 HTML5 唯一被所有现代移动浏览器原生支持、带无障碍属性、可键盘/触摸/辅助设备操作的进度控制器。
复杂点在于 iOS 对 input[type="range"] 的渲染限制多，比如无法用 background-gradient 填充已走过部分（Safari 不支持 ::after 伪元素在 range 上），只能用双层 range 叠加或 canvas 模拟，但那样就脱离了 Bootstrap 的轻量初衷。老老实实用单个 range，加 JS 同步，反而最稳。
