HTMLMediaElement 提供 play()、pause()、volume、muted 等方法和属性控制音视频，需在用户交互后调用 play() 并处理自动播放限制，监听 loadedmetadata 等事件确保状态就绪，必要时结合 AudioContext 实现高级音频处理。
如何用 HTMLMediaElement 控制播放/暂停/音量
所有 和 元素都继承自 HTMLMediaElement，直接调用它的方法和属性就能控制播放行为。关键不是“怎么加标签”，而是“怎么在 JS 里可靠触发操作”。
常见错误：在元素还没
加载元数据（metadata）时就调用 play()，导致静音或失败；或者没处理用户手势限制（比如 iOS Safari 要求首次播放必须由用户点击触发）。
-
play()和pause()是异步操作，返回 Promise，需用.catch()捕获拒绝（如自动播放被阻止） -
volume取值范围是0.0到1.0，设为0不等于静音（muted属性才真正绕过系统静音） -
muted = true会强制静音且不影响volume值，适合自动播放场景 - 设置
currentTime前建议监听loadedmetadata事件，避免跳转失败
为什么 play() 有时不生效？怎样处理自动播放限制
现代浏览器（Chrome、Safari、Firefox）普遍禁止无用户交互的自动播放，尤其是带声音的媒体。这不是 bug，是策略性限制。
典型表现：play() 抛出 DOMException: play() failed because the user didn't interact with the document first.
- 最稳妥的做法：只在用户点击、触摸、按键等事件回调中调用
play() - 如果必须预加载并准备播放，可先设
muted = true，再调用play()；后续再尝试取消静音（但取消静音仍可能失败，需捕获异常） - 检查
media.readyState：小于HTMLMediaElement.HAVE_METADATA时不要调play() - 用
canplay或canplaythrough事件替代定时轮询
如何监听播放状态变化与错误（onplay、onerror 等）
靠 onxxx 属性绑定容易被覆盖，推荐用 addEventListener；而且很多状态没有对应 on- 属性（比如 timeupdate）。
重要事件不是“全都要监听”，而是按需选关键几个：
-
loadedmetadata：元数据加载完成，此时可安全读取duration、设置currentTime -
timeupdate：播放位置变化时频繁触发（约每 250ms），适合更新进度条，但别在里面做重操作 -
ended：自然播放结束，paused为true，ended为true -
error：媒体加载失败（如 404、格式不支持、CORS 问题），video.error.code会给出具体原因（如MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED） - 避免监听
play来判断“是否正在播”——它只表示“开始请求播放”，真正状态要看paused和readyState
用 AudioContext 做精细音频控制（如音效、混音、可视化）
HTMLMediaElement 适合播放完整音视频流，但要做音效定位、实时频谱分析、动态滤波，就得上 AudioContext。
注意：Web Audio API 和媒体元素是两套体系，要桥接得用 MediaElementAudioSourceNode。
- 创建上下文后，必须在用户手势事件中调用
resume()才能启用（否则处于 suspended 状态） - 把
接入 Web Audio：用context.createMediaElementSource(audioEl)，再连到GainNode或AnalyserNode -
AnalyserNode不输出声音，只提供频域/时域数据，配合requestAnimationFrame可做波形图 - 避免反复创建
AudioContext—— 它开销大，且一个页面通常只需一个实例
const audio = document.querySelector('audio');
const context = new (window.AudioContext || window.webkitAudioContext)();
const source = context.createMediaElementSource(audio);
const analyser = context.createAnalyser();
analyser.fftSize = 256;
source.connect(analyser);
analyser.connect(context.destination);
// 在用户点击后 resume
button.addEventListener('click', () => {
if (context.state === 'suspended') context.resume();
});
实际项目里，多数播放控制用 HTMLMediaElement 就够了；只有当需要帧级音频处理、低延迟响应或复杂信号链时，才值得引入 AudioContext。两者混用时，时间同步（如 context.currentTime vs video.currentTime）容易漂移，这点常被忽略。
