HTML5 <audio> 标签需用 JavaScript 显式控制播放逻辑：play() 和 pause() 方法控制启停，currentTime 跳转时间点，需等待 loadedmetadata 事件后才能获取 duration，移动端需用户手势触发且静音才可自动播放。
HTML5 的 <audio> 标签本身不自动处理播放逻辑，所有交互行为都需要通过 JavaScript 显式控制——播放、暂停、跳转时间点这些操作不是“开箱即用”，而是依赖对 DOM 元素属性和事件的准确调用。
播放与暂停的核心控制方式
播放和暂停必须调用对应方法，不能仅靠修改状态属性：
- play() 启动或恢复播放；它返回 Promise，失败时会 reject（例如在未获用户手势授权的移动端静默失败）
-
pause() 暂停播放，不会重置
currentTime，再次调用play()会从中断处继续 -
paused是只读布尔属性，用于判断当前是否处于暂停态（包括尚未开始播放的状态） - 不要直接赋值
audio.paused = false——这无效，必须调用play()
进度跳转与实时同步的关键细节
时间控制依赖两个核心属性，但使用时机有讲究：
-
currentTime：单位为秒，可读可写。写入数值（如
audio.currentTime = 42.5）会立即跳转，但前提是音频已加载元数据 -
duration 初始为
NaN，需等待loadedmetadata或canplay事件触发后才可用 - 监听
timeupdate事件获取实时播放位置，适合更新进度条或时间显示（该事件触发较频繁，建议防抖或节流） - 拖动进度条时，应先设置
currentTime，再确保音频处于播放态（必要时调用play()）
常见失效场景与应对策略
很多“点不动”“跳不进去”的问题其实源于浏览器策略或加载时机：
立即学习“前端免费学习笔记（深入）”；
- 移动端自动播放被阻止？确保
muted属性存在，且首次play()由用户点击等手势触发 - 设置
currentTime无效？检查是否在loadedmetadata之前执行，或音频源尚未加载完成 - 进度条拖拽后没反应？确认绑定的是
input或change事件，并在回调中显式设置currentTime - 播放结束没触发回调？监听
ended事件而非轮询ended属性
基础控制逻辑的最小可行结构
一个可靠的基础控制流程通常包含：
- 获取 audio 元素引用（
document.querySelector('audio')） - 监听
loadedmetadata获取duration并初始化 UI（如总时长显示） - 绑定按钮 click 事件，根据
paused状态决定调用play()还是pause() - 监听
timeupdate更新当前播放时间，监听ended执行后续动作（如重置按钮文字）
