JavaScript媒体API核心是按场景选用合适接口:HTMLMediaElement控制嵌入音视频,MediaDevices采集流,MediaRecorder录制,Web Audio精细处理。

JavaScript 的媒体 API 主要通过 和 元素的原生方法与事件,配合 MediaDevices、MediaRecorder、AudioContext 等接口实现控制、捕获和处理音视频。核心不在于“调用某个函数”,而在于理解不同场景下该用哪套 API。
控制页面内嵌音视频(HTMLMediaElement)
这是最常用场景:播放、暂停、调节音量、监听播放状态等。所有 和 元素都继承自 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.srcObject = stream(注意不是src)即可实时显示画面和声音 - 需处理权限拒绝(
NotAllowedError)、设备不可用(NotFoundError)等异常;建议先用enumerateDevices()检查可用设备列表
录制音视频(MediaRecorder API)
在浏览器中直接录制用户媒体流为 Blob(如 MP4、WebM),适合轻量级录屏/录音功能。
媒体包提供了可管理各种媒体类型的类。这些类可提供用于执行音频和视频操作。除了基本操作之外,还可提供铃声管理、脸部识别以及音频路由控制。本文说明了音频和视频操作。 本文旨在针对希望简单了解Android编程的初学者而设计。本文将指导你逐步开发使用媒体(音频和视频)的应用程序。本文假定你已安装了可开发应用程序的Android和必要的工具,同时还假定你已熟悉Java或掌握面向对象的编程概念。感兴趣的朋友可以过来看看
立即学习“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。









