JavaScript的Media API仅提供媒体元素控制接口和状态监听，不直接操作音视频数据；底层解码、处理需Web Audio API（音频）或Canvas/WebCodecs（视频）。
JavaScript 的 Media API 本身不直接“操作音频/视频数据”，它提供的是对媒体元素（<audio>、<video>）的**控制接口**和**状态监听能力**；真正做解码、处理、合成等底层操作，得靠 Web Audio API（音频）或 Canvas + requestVideoFrameCallback / WebCodecs API（视频）。别一上来就冲着“剪辑”“混音”去，先分清边界。
如何用 HTMLMediaElement 控制播放/暂停/跳转
所有 <audio> 和 <video> 元素都继承自 HTMLMediaElement，它的方法和属性就是最常用的控制入口。
-
play()和pause()是核心控制方法，但注意：现代浏览器要求用户手势触发（如click）后才能调用play()，否则会抛出NotAllowedError -
currentTime是可读写属性，单位是秒，设值即跳转，但需等loadedmetadata事件后才可靠 —— 否则可能被忽略或重置 -
volume范围是0.0到1.0，设为0不等于静音（muted才是硬静音），muted = true会绕过系统音量且不触发权限提示 -
playbackRate支持变速（如2.0加速两倍），但部分格式（尤其 HLS）在移动端可能不生效
const video = document.querySelector('video');
video.addEventListener('loadedmetadata', () => {
video.currentTime = 30; // 跳到第30秒
});
document.getElementById('playBtn').addEventListener('click', () => {
video.play().catch(e => console.warn('自动播放被阻止:', e));
});
为什么 play() 总是失败？常见静音与自动播放限制
Chrome、Safari 等主流浏览器默认禁止无用户交互的自动播放，尤其是带声音的媒体。这不是 bug，是策略。
- 若媒体明确无需声音（如背景视频），加
muted属性并设autoplay，多数情况能成功：<video muted autoplay> - 若必须有声，只能等用户点击/触摸后首次调用
play()；之后再调用（如循环播放）通常不受限 -
document.hasFocus()和document.visibilityState === 'visible'会影响某些场景下的播放行为，但不是根本解法 - 不要依赖
canplay或canplaythrough就立刻play()—— 仍可能因无用户手势被拒
如何监听播放状态变化与错误？别只靠 onerror
error 事件只在资源加载失败时触发（如 404、跨域、格式不支持），但播放中卡顿、解码失败、网络中断等，得靠其他事件组合判断。
立即学习“Java免费学习笔记（深入）”；
-
waiting：缓冲不足开始等待，持续太久说明网络或服务有问题 -
stalled：浏览器试图获取数据但没进展（比waiting更严重） -
ended：自然播完，但若设置了loop = true就不会触发 -
timeupdate：每帧更新一次currentTime，适合做进度条同步，但别在里面做重操作（触发频繁） - 检查
networkState（如NETWORK_NO_SOURCE）和readyState（如HAVE_NOTHING）比只捕获error更早发现问题
video.addEventListener('stalled', () => {
console.log('卡住了，当前 readyState:', video.readyState);
});
video.addEventListener('error', () => {
console.error('资源加载失败，error code:', video.error?.code);
});
想真正“操作音频数据”？转向 Web Audio API
HTMLMediaElement 只能控制播放，不能读取或修改 PCM 数据。要实现音效、频谱分析、实时混音，必须把媒体流接入 AudioContext。
- 用
AudioContext.createMediaElementSource(video)把<video>当作音频源节点 - 后续可接
BiquadFilterNode（均衡）、GainNode（音量）、AnalyserNode（FFT 分析）等 - 注意：
createMediaElementSource仅接受已播放过的媒体元素（至少触发过一次play()），否则报错 - 移动端需在用户手势回调中初始化
AudioContext，否则可能处于 suspended 状态
const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const source = audioCtx.createMediaElementSource(video); const analyser = audioCtx.createAnalyser(); source.connect(analyser); analyser.connect(audioCtx.destination);
真正难的不是调用哪个方法，而是理解浏览器对媒体生命周期的约束：从加载、解码、渲染到用户权限，每个环节都有隐式规则。比如 currentTime 设值后没反应？先查 readyState；play() 拒绝？别急着加 try/catch，先看有没有用户手势上下文。这些细节不踩一遍坑，文档读十遍也没用。
