JavaScript操作音视频主要通过HTMLMediaElement（audio/video标签）实现基础控制，配合Web Audio API进行精细音频处理，以及MediaDevices与MediaRecorder实现媒体捕获录制，还需注意浏览器自动播放策略限制。
JavaScript 操作音视频主要通过 HTMLMediaElement（ 和 元素）及其配套 API 实现，核心是控制播放、获取状态、响应事件，并结合 Web Audio API 或 MediaRecorder 等扩展能力做更深度处理。
基础媒体元素操作（Audio/Video 标签）
直接操作 或 DOM 元素是最常用方式，它们继承自 HTMLMediaElement，提供统一的属性和方法：
- 常用属性：`src`、`currentTime`（当前播放时间，秒）、`duration`（总时长，需等元数据加载完成才有效）、`paused`、`ended`、`volume`（0–1）、`muted`、`playbackRate`（播放速率，如 0.5、2）
-
常用方法：`.play()`（返回 Promise，需用户交互触发）、`.pause()`、`.load()`（重载资源）、`.canPlayType(type)`（检查是否支持某 MIME 类型，如
"video/mp4"） - 关键事件：`canplay`（可开始播放）、`canplaythrough`（可流畅播完）、`timeupdate`（播放时间变化，高频触发）、`ended`、`error`、`loadedmetadata`（元数据就绪）
Web Audio API（精细音频处理）
当需要混音、滤波、可视化、实时分析或合成音频时，用 Web Audio API 替代或配合 `
- 核心对象：`AudioContext`（音频处理图的上下文，类似 canvas 的 context）
- 常见节点类型：
AudioBufferSourceNode（播放音频缓冲区）、GainNode（音量控制）、BiquadFilterNode（高低通/峰化等滤波）、AnalyserNode（频谱/波形数据）、MediaElementAudioSourceNode（把 ` - 典型流程：创建 `AudioContext` → 创建节点 → 连接成图（`.connect()`）→ 启动播放（`.start()`）
媒体捕获与录制（MediaDevices & MediaRecorder）
从摄像头、麦克风获取流并录制：
立即学习“Java免费学习笔记（深入）”；
- `navigator.mediaDevices.getUserMedia({ video: true, audio: true })` → 返回 `MediaStream`，可赋给 `
- `MediaRecorder` 构造函数接收 `MediaStream`，调用 `.start()`、`.stop()` 录制，监听 `dataavailable` 事件获取 `Blob`（如 MP4/WebM）
- 注意权限：必须在安全上下文（HTTPS 或 localhost）中调用，且需用户明确授权
其他实用 API 补充
增强控制力和兼容性：
- Picture-in-Picture API：`.requestPictureInPicture()` 让 `
- Fullscreen API：`.requestFullscreen()` 控制全屏（需用户手势触发）
- Media Session API：`.mediaSession` 设置播放信息（标题、封面）和监听播放控制（如耳机按键），提升 PWA 体验
- Playback Statistics：`getVideoPlaybackQuality()`（仅 Chrome/Firefox）获取卡顿、丢帧等指标
基本上就这些。实际项目中，多数场景用 HTMLMediaElement 就够了；需要音频分析、特效或低延迟处理时再引入 Web Audio；录制或直播则依赖 MediaDevices + MediaRecorder。注意所有自动播放行为（尤其带声音）受浏览器策略限制，务必响应用户交互后再调用 .play()。
