核心是将含活跃音频轨道的MediaStream（本地getUserMedia或远程WebRTC track）接入AudioContext，通过createMediaStreamSource()创建只读源节点并连接至分析/处理节点；需确保audioContext运行、流有启用音频轨、避免多轨传入Safari。
使用 AudioContext 的 MediaStreamAudioSourceNode 处理直播流，核心是把来自摄像头/麦克风（或远程 WebRTC 流）的 MediaStream 音频轨道接入 Web Audio API 进行实时分析、混音、滤波等操作。它本身不处理“直播协议”（如 HLS、RTMP），而是处理已解码为 PCM 的音频流。
获取有效的 MediaStream 音频源
必须确保你拿到的是包含**活跃音频轨道**的 MediaStream：
- 本地采集：用
navigator.mediaDevices.getUserMedia({audio: true})获取用户授权后的流； - 远程 WebRTC：从
RTCPeerConnection的ontrack事件中提取event.track，再用new MediaStream([track])构建单轨流； - 注意：不能直接用
<video>或<audio>元素的srcObject创建源节点——需显式提取音频轨道，例如：const audioStream = new MediaStream(stream.getAudioTracks());
创建并连接 MediaStreamAudioSourceNode
该节点是只读输入源，**不可重复使用**，且必须在 AudioContext 运行状态下创建：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 先调用
audioContext.resume()（尤其在用户交互后）； - 用
audioContext.createMediaStreamSource(stream)创建节点； - 它没有输入，只有输出，必须连接到后续节点（如
GainNode、BiquadFilterNode或AnalyserNode）； - 示例：
const source = audioContext.createMediaStreamSource(audioStream);<br>source.connect(analyser); // 或 connect(gain).connect(destination);
实时处理与注意事项
直播流持续推送音频帧，因此处理逻辑需保持低延迟、避免阻塞：
立即学习“前端免费学习笔记（深入）”；
- 若做音频分析（如频谱、响度），用
AnalyserNode+getByteFrequencyData()在requestAnimationFrame中读取； - 避免在主线程做重计算（如 FFT）；可考虑
OffscreenCanvas或 Web Worker 配合； - 流停止时（如 track.muted、ended 或 connection 关闭），
MediaStreamAudioSourceNode自动静音，但建议手动disconnect()并清理引用； - 不支持 Safari 对
createMediaStreamSource传入多轨流（含视频轨）——务必只传纯音频流。
常见问题排查
如果没声音或报错，优先检查：
-
audioContext.state是否为"running"（否则调用resume()）； -
stream.getAudioTracks().length > 0且track.enabled === true； - 浏览器是否屏蔽了自动播放（未用户手势触发时
destination不发声）； - WebRTC 流中 track 的
readyState是否为"live"，而非"ended"。
