怎样使用JavaScript操作媒体_音频和视频API如何使用

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

JavaScript 的媒体 API 主要通过 <audio></audio> 和 <video></video> 元素的原生方法与事件，配合 MediaDevices、MediaRecorder、AudioContext 等接口实现控制、捕获和处理音视频。核心不在于“调用某个函数”，而在于理解不同场景下该用哪套 API。

控制页面内嵌音视频（HTMLMediaElement）

这是最常用场景：播放、暂停、调节音量、监听播放状态等。所有 <audio></audio> 和 <video></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> 元素：video.srcObject = stream（注意不是 src）即可实时显示画面和声音
• 需处理权限拒绝（NotAllowedError）、设备不可用（NotFoundError）等异常；建议先用 enumerateDevices() 检查可用设备列表

录制音视频（MediaRecorder API）

在浏览器中直接录制用户媒体流为 Blob（如 MP4、WebM），适合轻量级录屏/录音功能。

标签： javascript java html node 浏览器 safari ai ios win stream ios 1