javascript如何操作音频和视频_有哪些API可用

HTMLMediaElement 是音视频操作核心接口，提供播放、暂停等统一控制；需监听 loadedmetadata 确保就绪；play() 需用户手势触发；MediaSession 支持系统级控制；Web Audio 用于精细处理，AudioContext 需 resume()；requestVideoFrameCallback 实现帧同步但仅 Chromium 支持。

HTMLMediaElement 是操作音视频的核心接口

所有 <audio> 和 <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免费学习笔记（深入）”；

Programming Helper

AI代码自动生成器，在AI的帮助下更快地编程

下载

• 需先检查支持性：'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> 的能力——比如实时滤波、音高变换、可视化频谱、多音轨混音——就得用 Web Audio API。它和 HTMLMediaElement 可桥接，但设计模型完全不同：基于节点图（AudioContext → MediaElementAudioSourceNode → BiquadFilterNode…）。

容易忽略的关键点是音频上下文默认处于 suspended 状态，首次播放前必须由用户手势恢复，否则后续所有节点无效。

• 创建 AudioContext 后立即调用 context.resume()（在 click 回调里）
• 用 context.createMediaElementSource(audioEl) 将 <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> 元素实例，不能是 <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);