JavaScript媒体API核心是按场景选用合适接口：HTMLMediaElement控制嵌入音视频，MediaDevices采集流，MediaRecorder录制，Web Audio精细处理。
JavaScript 的媒体 API 主要通过 <audio> 和 <video> 元素的原生方法与事件，配合 MediaDevices、MediaRecorder、AudioContext 等接口实现控制、捕获和处理音视频。核心不在于“调用某个函数”，而在于理解不同场景下该用哪套 API。
控制页面内嵌音视频（HTMLMediaElement）
这是最常用场景：播放、暂停、调节音量、监听播放状态等。所有 <audio> 和 <video> 元素都继承自 HTMLMediaElement 接口。
- 基础操作直接调用方法：
play()、pause()、load()；设置属性如volume = 0.8（0–1）、muted = true、currentTime = 30（跳转到第30秒） - 监听关键事件：
loadedmetadata（元信息加载完成）、canplay（可开始播放）、timeupdate（播放时间变化）、ended（播放结束）、error（加载或解码失败） - 注意：移动端自动播放受限制，需用户手势触发（如点击按钮后调用
play()），否则可能静音播放或直接拒绝
获取用户摄像头与麦克风（MediaDevices.getUserMedia）
用于视频通话、录屏、语音识别等需要实时采集的场景。
- 调用
navigator.mediaDevices.getUserMedia({ video: true, audio: true })返回 Promise，成功后得到MediaStream - 把流赋给
<video>元素：video.srcObject = stream（注意不是src）即可实时显示画面和声音 - 需处理权限拒绝（
NotAllowedError）、设备不可用（NotFoundError）等异常；建议先用enumerateDevices()检查可用设备列表
录制音视频（MediaRecorder API）
在浏览器中直接录制用户媒体流为 Blob（如 MP4、WebM），适合轻量级录屏/录音功能。
立即学习“Java免费学习笔记（深入）”；
- 用
getUserMedia获取流后，传入new MediaRecorder(stream)创建录制器 - 监听
dataavailable事件获取每段录制数据（event.data是 Blob），拼接后可下载或上传 - 支持设置 mimeType（如
'video/webm;codecs=vp9'），但兼容性需测试；iOS Safari 对MediaRecorder支持有限（仅部分 iOS 16.4+）
音频可视化与处理（Web Audio API）
当需要频谱分析、音效处理、合成音频时，用 AudioContext 替代简单播放。
- 创建上下文：
const audioCtx = new (window.AudioContext || window.webkitAudioContext)() - 将媒体元素接入音频图：
const source = audioCtx.createMediaElementSource(videoOrAudioEl)，再连接analyser节点做 FFT 分析，或连gainNode控制音量 - 从
analyser.frequencyBinCount读取频域数据，配合requestAnimationFrame实现实时波形或频谱图
实际项目中往往组合使用：比如用 getUserMedia 获取流 → 用 MediaRecorder 录制 → 用 AudioContext 对录制后的音频做降噪处理。关键是根据需求选对入口——展示用 HTMLMediaElement，采集用 MediaDevices，录制用 MediaRecorder，精细控制用 Web Audio。
