Audio 标签是 HTML5 原生音频播放器，提供 currentTime、duration、paused 等属性，play()、pause()、load() 等方法，以及 canplay、ended、timeupdate 等事件，支持自定义控制、进度条、静音、倍速等功能。
Audio 标签本身是 HTML5 提供的原生音频播放器，它不仅支持基础播放，还暴露了丰富的 JavaScript API，可用于精准控制播放状态、音量、时间、缓冲等行为。 掌握这些 API 是实现自定义播放器、进度条、静音切换、倍速播放等功能的关键。
常用属性与状态获取
通过 audio 元素的 DOM 对象可直接读取当前播放状态和媒体信息：
- currentTime：当前播放时间（秒），可读可写（写入即跳转）
-
duration：总时长（秒），加载完成前为
NaN，建议监听loadedmetadata或canplay事件后再读取 -
paused：布尔值，
true表示已暂停（含未开始） -
ended：布尔值，
true表示播放自然结束 - volume：音量值（0.0–1.0），默认为 1
-
muted：是否静音，设为
true会覆盖volume - playbackRate：播放速率（如 0.5、1.0、1.5、2.0），支持变速
-
buffered：返回
TimeRanges对象，表示已缓冲的时间段，常用于绘制缓冲进度条
核心方法调用
所有控制逻辑都依赖以下几个关键方法：
- play()：启动或恢复播放；返回 Promise，失败时会 reject（例如用户未交互就自动播放被浏览器阻止）
-
pause()：暂停播放，不重置
currentTime - load()：重新加载音频源（如更换 src 后需调用）
-
canPlayType(type)：检查浏览器是否支持某 MIME 类型（如
"audio/mpeg"），返回"probably"、"maybe"或空字符串
注意：play() 在移动端通常需由用户手势（如 click/tap）触发，否则会被静默拒绝。
立即学习“前端免费学习笔记（深入）”；
重要事件监听
响应播放生命周期变化，必须监听对应事件：
- canplay：媒体已加载足够数据，可开始播放（但不一定能播完）
- loadedmetadata：元数据（时长、尺寸等）已加载完成
- timeupdate：播放时间更新时频繁触发（约每 200–250ms 一次），适合更新进度条
- ended：播放自然结束时触发
-
error：加载或解码出错时触发，可通过
audio.error.code判断错误类型（如 4 表示网络错误） - waiting / playing：分别表示等待缓冲和开始播放（可用于显示加载中状态）
实用控制技巧
结合属性、方法与事件，可快速实现常见功能：
-
拖动进度条：监听 input/change 事件 → 设置
audio.currentTime = value→ 触发play()（若已暂停） -
静音/取消静音：切换
audio.muted = !audio.muted，无需改volume -
音量滑块：绑定
input事件 →audio.volume = slider.value（注意限制在 0–1） -
播放速率切换：如
audio.playbackRate = 1.5，部分浏览器可能不支持非标准值 -
自动续播：监听
ended事件 → 调用audio.currentTime = 0; audio.play();
不复杂但容易忽略。
