JavaScript通过HTMLMediaElement原生控制音视频播放，支持play()/pause()、currentTime、volume、playbackRate等基础操作；可读取duration、readyState、buffered等状态；监听canplay、timeupdate、ended等事件；并支持MediaSession、captureStream及AudioContext高级处理。
JavaScript 通过 HTMLMediaElement（如 <audio> 和 <video> 元素）以及配套的 Media API 来控制音视频播放、获取状态、响应事件和实现交互功能。核心不依赖第三方库，原生支持良好。
基础播放控制
所有 <audio> 和 <video> 元素都继承自 HTMLMediaElement，具备统一的操作接口：
-
play()和pause()：启动或暂停播放（需用户手势触发，否则可能被浏览器阻止） -
load()：重新加载媒体资源（例如切换 src 后调用） -
currentTime：读写当前播放时间（单位：秒），支持精确跳转 -
volume：设置音量（0.0–1.0），muted属性可静音 -
playbackRate：调整播放速率（如 0.5、1.0、2.0）
状态与元数据获取
可通过属性实时读取媒体状态，辅助 UI 更新或逻辑判断：
-
duration：总时长（秒），加载完成前为NaN；监听loadedmetadata事件后才可靠 -
readyState：当前准备状态（0–4），常用判断是否可播放：≥ HTMLMediaElement.HAVE_FUTURE_DATA -
networkState：网络状态（如NETWORK_IDLE、NETWORK_LOADING） -
buffered：返回TimeRanges对象，表示已缓冲的时间段，可用于绘制缓冲进度条
关键事件监听
Media API 提供丰富事件，覆盖生命周期与用户交互：
立即学习“Java免费学习笔记（深入）”；
-
canplay/canplaythrough：表示可开始播放 / 可连续播放至结束（适合自动播放逻辑） -
timeupdate：播放过程中高频触发（通常每 200–250ms），用于更新进度条、字幕同步等 -
ended：播放自然结束时触发 -
error：加载或解码失败时触发，error.code可区分错误类型（如MEDIA_ERR_SRC_NOT_SUPPORTED） -
loadeddata：首帧渲染完成，适合做封面图隐藏
进阶能力：MediaSession 与音视频处理
现代浏览器还支持更深度的集成：
-
navigator.mediaSession：设置播放信息（标题、专辑、封面）、添加自定义控制（如上一首/下一首），并在系统通知栏/锁屏界面显示控件 -
captureStream()：将<video>或<canvas>实时内容转为MediaStream，用于录制或 WebRTC 推流 - 结合
AudioContext和MediaElementAudioSourceNode，可对音频进行滤波、混响、频谱分析等处理
