javascript如何操作音频和视频_相关API有哪些

JavaScript操作音视频主要通过HTMLMediaElement（audio/video标签）实现基础控制，配合Web Audio API进行精细音频处理，以及MediaDevices与MediaRecorder实现媒体捕获录制，还需注意浏览器自动播放策略限制。

JavaScript 操作音视频主要通过 HTMLMediaElement（<audio></audio> 和 <video></video> 元素）及其配套 API 实现，核心是控制播放、获取状态、响应事件，并结合 Web Audio API 或 MediaRecorder 等扩展能力做更深度处理。

基础媒体元素操作（Audio/Video 标签）

直接操作 <audio></audio> 或 <video></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（把 `` 接入 Web Audio 图）
• 典型流程：创建 `AudioContext` → 创建节点 → 连接成图（`.connect()`）→ 启动播放（`.start()`）

媒体捕获与录制（MediaDevices & MediaRecorder）

从摄像头、麦克风获取流并录制：

标签： javascript java html node 浏览器 session ai ios stream 耳机 canva