JavaScript控制音视频需遵循浏览器策略：play()须由用户手势触发，autoplay仅静音时有效；volume需在loadedmetadata后设置，muted可随时设；关键状态用playing而非play判断；跨域需服务端配CORS或设crossorigin属性。
JavaScript 控制音频和视频，核心是操作 和 元素的原生 API，不是靠第三方库“封装”出来的魔法——直接调用 play()、pause()、load() 这些方法就能生效，但实际用起来卡顿、静音、跨域、自动播放失败等问题频发，根源往往在策略和时机上。
为什么 play() 突然不工作了？
现代浏览器（Chrome 70+、Safari、Edge）强制要求用户手势（如 click、touchstart）触发媒体播放，否则抛出 NotAllowedError。即使 DOM 已就绪、src 已设置、autoplay 属性写了也没用。
- 必须在用户交互回调中调用
play()，例如：button.addEventListener('click', () => audio.play()) -
autoplay属性仅在满足「静音 + 用户信任上下文」时才可能生效，比如autoplay muted可用于视频首帧自动播放 - 不要在
DOMContentLoaded或load事件里直接play()，大概率被拒 - 捕获拒绝：用
.play().catch(e => console.warn('play failed:', e))查看具体错误类型
volume、muted 和 playbackRate 怎么设才稳定？
这些属性看似简单，但受制于浏览器策略和媒体加载状态。未加载元数据（loadedmetadata）前设置 volume 无效；muted 是唯一可随时安全设置的开关。
-
muted = true可立即生效，且是绕过自动播放限制的关键（尤其对） -
volume范围是 0.0–1.0，设为0不等于muted，仍会消耗解码资源 -
playbackRate默认为1.0，设为0.5或2.0会影响音高（除非启用preservesPitch: false，但该选项非标准，仅部分浏览器支持） - 建议监听
canplay或loadeddata后再设volume和playbackRate
如何监听播放进度与状态变化？
别只依赖 timeupdate，它触发频率高但不精确；关键状态要用组合事件判断，比如“真正开始播放”不是 play，而是 playing。
立即学习“Java免费学习笔记（深入）”；
-
play：用户/脚本调用了play()，但未必已出声 -
playing：媒体已缓冲足够、开始渲染帧/音频流（此时才是“真播起来了”） -
pause和ended是明确终点，但stalled或waiting表示卡顿，需结合networkState和readyState判断 - 获取当前时间用
currentTime，但它可能因缓冲回退（如网络差时），别假设它单调递增 - 想做进度条？用
duration（可能为NaN直到loadedmetadata）除以currentTime，并节流timeupdate防抖
跨域音频/视频请求为什么报错？
当 src 指向跨域资源（如 CDN 上的 MP3），若服务端没返回 Access-Control-Allow-Origin，AudioContext 解码或 的 captureStream() 会失败，控制台提示 Failed to load resource: net::ERR_FAILED 或更隐晦的 InvalidStateError。
- 纯播放（
）不受 CORS 限制，但后续 JS 读取duration、buffered或调用decodeAudioData()就会触发校验 - 解决办法只有两个：服务端配好 CORS 头，或改用代理（开发时可用本地 server 中转）
- 避免在未检查
crossOrigin属性时直接操作跨域媒体——给元素加crossorigin="anonymous"是前提，否则连预检都跳过
最常被忽略的是“加载状态机”：从 networkState（0–3）和 readyState（0–4）组合才能准确判断媒体是否真的可播放，而不是只看 paused === false。很多 UI 同步 bug，根源都在这里。
