JavaScript通过Web Audio API实现音频精细处理与合成，HTMLMediaElement（video/audio）负责基础播放管理；二者常配合：媒体元素控制播放、跳转、音量等，Web Audio用于滤波、分析、生成等底层操作。
JavaScript 通过 Web Audio API 和 HTMLMediaElement（Video/Audio 元素）API 分别实现对音频信号的精细控制和对音视频资源的基础播放管理。两者常配合使用，但职责明确：Video/Audio 标签负责加载、解码、时间控制与基础播放；Web Audio API 负责音频处理、合成、空间化、实时分析等底层操作。
用 <video> 和 <audio> 标签控制播放
这是最直接的方式，适用于大多数播放、暂停、跳转、音量调节等场景：
- 获取元素后调用
play()、pause()、设置currentTime跳转，修改volume（0–1）、muted、loop等属性 - 监听事件如
loadedmetadata（元信息就绪）、canplay（可开始播放）、timeupdate（播放进度变化）、ended（播放结束） - 注意自动播放策略：现代浏览器通常要求用户手势（如 click）触发
play()，否则会抛出错误或静音播放
把视频/音频流接入 Web Audio API 做处理
若需对播放中的音频做滤波、混响、频谱分析等，不能直接操作 <audio> 元素本身，而要将其输出“桥接”到 Web Audio 图形中：
- 创建
AudioContext，再用context.createMediaElementSource(videoOrAudioElement)创建源节点 - 后续可连接
BiquadFilterNode、GainNode、AnalyserNode等进行处理 - 最终必须连接到
context.destination才能听到声音。示例：const source = context.createMediaElementSource(video);<br>source.connect(analyser);<br>analyser.connect(context.destination);
用 Web Audio API 合成与生成音频
不依赖媒体文件，完全由代码生成声音：
立即学习“Java免费学习笔记（深入）”；
- 用
context.createOscillator()生成正弦波、方波等基础波形，设置frequency和type - 用
context.createBufferSource()播放预加载的音频缓冲区（如通过fetch + arrayBuffer + decodeAudioData加载） - 所有节点需显式调用
start()和stop()（注意时间参数支持精确调度） - 避免频繁创建/销毁
AudioContext，推荐复用；注意它在页面后台可能被暂停，需监听statechange
获取音视频实时数据（如可视化、语音识别前处理）
结合 AnalyserNode 或 MediaStreamTrack.getSettings() 可提取原始信息：
-
AnalyserNode提供时域（getByteTimeDomainData）和频域（getByteFrequencyData）数据，用于波形图、频谱图 - 从
<video>获取帧：用requestVideoFrameCallback（现代）或canvas.getContext('2d').drawImage(video, ...)截取当前画面 - 麦克风输入需先调用
navigator.mediaDevices.getUserMedia({ audio: true })，再用context.createMediaStreamSource(stream)接入 Web Audio
