当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript操作音视频主要依赖HTML5的Audio和Video元素，结合相关API实现控制与交互。以下是常见方法和API：一、基本操作1.Audio和Video元素通过HTML标签直接引入音频或视频文件：<audioid="myAudio"src="audio.mp3"></audio><videoid="myVideo"src="video.mp4">

JavaScript操作音视频主要依赖HTML5的Audio和Video元素，结合相关API实现控制与交互。以下是常见方法和API：一、基本操作1.Audio和Video元素通过HTML标签直接引入音频或视频文件：<audioid="myAudio"src="audio.mp3"></audio><videoid="myVideo"src="video.mp4">

2026-01-14 19:57:48 0浏览收藏

来到golang学习网的大家，相信都是编程学习爱好者，希望在这里学习文章相关编程知识。下面本篇文章就来带大家聊聊《JavaScript如何操作音频视频？有哪些API？》，介绍一下，希望对大家的知识积累有所帮助，助力实战开发！

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

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

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

所有和元素都继承自 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 并添加事件监听器。

需先检查支持性：'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 适合精细音频处理

如果需求超出的能力——比如实时滤波、音高变换、可视化频谱、多音轨混音——就得用 Web Audio API。它和 HTMLMediaElement 可桥接，但设计模型完全不同：基于节点图（AudioContext → MediaElementAudioSourceNode → BiquadFilterNode…）。

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

创建 AudioContext 后立即调用 context.resume()（在 click 回调里）
用 context.createMediaElementSource(audioEl) 将接入 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 估算，但误差明显。

必须传入一个元素实例，不能是
回调参数含 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 这类高级能力则有明确的支持边界——别在没确认浏览器版本的情况下默认启用。

今天关于《JavaScript操作音视频主要依赖HTML5的Audio和Video元素，结合相关API实现控制与交互。以下是常见方法和API：一、基本操作1.Audio和Video元素通过HTML标签直接引入音频或视频文件：2.JavaScript控制使用getElementById获取元素后进行操作。音频控制示例：constaudio=document.getElementById('myAudio');audio.play();//播放audio.pause();//暂停audio.volume=0.5;//设置音量（0~1）audio.currentTime=10;//设置当前播放时间（秒）视频控制示例：constvideo=document.getElementById('myVideo');video.play();//播放video.pause();//暂停video.volume=0.8;//设置音量video.currentTime=30;//设置当前时间二、常用API1.HTMLMediaElementAPI这是Audio和Video元素共有的接口，包含以下属性和方法：|属性/方法|说明|》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！