HTMLMediaElement 是音视频操作核心接口，提供播放、暂停等统一控制；需监听 loadedmetadata 确保就绪；play() 需用户手势触发；MediaSession 支持系统级控制；Web Audio 用于精细处理，AudioContext 需 resume()；requestVideoFrameCallback 实现帧同步但仅 Chromium 支持。
HTMLMediaElement 是操作音视频的核心接口
所有 <audio></audio> 和 <video></video> 元素都继承自 HTMLMediaElement，它提供了统一的控制能力，比如播放、暂停、跳转、音量调节。直接操作 DOM 元素就能调用这些方法，不需要额外库。
常见错误是试图在未加载元数据时调用 duration 或 play() —— 此时值可能为 NaN 或抛出 NotAllowedError。应监听 loadedmetadata 或使用 canplay 事件确保就绪。
-
play()和pause()：必须由用户手势（如 click）触发，否则现代浏览器会拒绝（DOMException: play() failed because the user didn't interact with the document first） -
currentTime：设为负数或超长值不会报错，但实际行为因浏览器而异（Chrome 会 clamp 到[0, duration]，Safari 可能跳回 0） -
muted和volume：设置muted = true会覆盖volume；volume范围是0.0–1.0，超出会被截断
MediaSession API 用于系统级媒体控制
当页面播放音视频时，用户可能通过键盘媒体键、锁屏界面或通知栏控制播放。启用 MediaSession 可让这些操作映射到你的逻辑中。
不配置 MediaSession 时，系统通常只显示标题和图标，且无法响应播放/暂停等操作。必须显式设置 metadata 并添加事件监听器。
立即学习“Java免费学习笔记（深入）”；
- 需先检查支持性：
'mediaSession' in navigator -
navigator.mediaSession.metadata至少要设title和src（图标），否则部分平台（如 Android）不显示控件 - 事件监听必须在播放开始后注册，否则某些系统（如 Chrome on Windows）可能忽略首次操作
if ('mediaSession' in navigator) {
navigator.mediaSession.metadata = new MediaMetadata({
title: '示例音频',
artist: '作者名',
artwork: [{ src: '/icon.png', sizes: '96x96' }]
});
navigator.mediaSession.setActionHandler('play', () => audio.play());
navigator.mediaSession.setActionHandler('pause', () => audio.pause());
}
Web Audio API 适合精细音频处理
如果需求超出 <audio></audio> 的能力——比如实时滤波、音高变换、可视化频谱、多音轨混音——就得用 Web Audio API。它和 HTMLMediaElement 可桥接，但设计模型完全不同：基于节点图（AudioContext → MediaElementAudioSourceNode → BiquadFilterNode…）。
容易忽略的关键点是音频上下文默认处于 suspended 状态，首次播放前必须由用户手势恢复，否则后续所有节点无效。
- 创建
AudioContext后立即调用context.resume()（在 click 回调里） - 用
context.createMediaElementSource(audioEl)将<audio></audio>接入 Web Audio 图，之后再修改audioEl.volume = 0防止双重输出 -
analyserNode.fftSize影响频谱精度和性能，常用值为256、512、1024；越大越准，但计算开销越高
Video 的帧处理与画布合成依赖 requestVideoFrameCallback
传统 requestAnimationFrame 不保证与视频帧同步，导致画面撕裂或丢帧。Chrome 110+ 支持 requestVideoFrameCallback，它在浏览器真正准备渲染下一帧时触发回调，是做逐帧分析、AR 贴图、实时滤镜的可靠入口。
该 API 目前仅 Chromium 系浏览器支持（Chrome、Edge、Opera），Firefox 和 Safari 尚未实现。降级方案只能用 timeupdate + videoEl.currentTime 估算，但误差明显。
- 必须传入一个
<video></video>元素实例，不能是<audio></audio> - 回调参数含
mediaTime（精确时间戳）和presentedFrames（已呈现帧数），可用于检测卡顿 - 每次回调后需手动再次调用该方法，它是一次性的
let video = document.querySelector('video');
function onFrame(now, metadata) {
console.log(`视频时间：${metadata.mediaTime.toFixed(3)}s`);
// 在这里做 canvas 绘制或 WebGL 处理
video.requestVideoFrameCallback(onFrame);
}
video.requestVideoFrameCallback(onFrame);
有些功能看似简单（比如“静音”或“跳到 30 秒”），但实际涉及权限、时序、跨浏览器差异；Web Audio 和 requestVideoFrameCallback 这类高级能力则有明确的支持边界——别在没确认浏览器版本的情况下默认启用。 
