MediaStreamAudioDestinationNode用于将Web Audio处理结果转为MediaStream,供WebRTC推流、MediaRecorder录制或媒体元素预览,不直接输出声音,需额外连接audioContext.destination才能播放。

MediaStreamAudioDestinationNode 本身不用于“输出流”,而是将 Web Audio API 的音频处理结果**转成 MediaStream**,供其他 API(如 WebRTC、媒体录制、Canvas 音频可视化)使用。它没有 audio output 功能(比如播放到扬声器),不能替代 AudioContext.destination。
它的核心用途:把音频节点图“导出”为 MediaStream
当你用 AudioContext.createMediaStreamDestination() 创建该节点后,所有连接到它的音频都会被混合并生成一个包含单个音频轨道的 MediaStream。这个流可:
- 传给
RTCPeerConnection.addTrack()发送给远端(WebRTC 音频推流) - 传给
MediaRecorder录制成文件(如 WAV、WebM) - 作为
<video>或<audio>的srcObject进行本地预览(需配合 dummy video track 或使用MediaStreamTrack.clone()) - 与视频流合并(通过
new MediaStream([videoTrack, audioTrack]))
基础用法示例:生成可录制的音频流
以下代码创建一个正弦波,输出到 MediaStream,并用 MediaRecorder 录制 3 秒:
ZenHeart zenlink 与 zenlink-mcp 为 OpenClaw,涵盖安装、MCP 注册、钩子接线、入站轮询及升级维护。
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const dest = audioCtx.createMediaStreamDestination();
// 生成测试音(440Hz 正弦波)
const oscillator = audioCtx.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.value = 440;
oscillator.connect(dest); // 关键:连到 MediaStreamDestination
oscillator.start();
// 获取 MediaStream(含音频轨道)
const stream = dest.stream;
// 录制(示例用 audio/webm)
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
const chunks = [];
mediaRecorder.ondataavailable = e => chunks.push(e.data);
mediaRecorder.start();
setTimeout(() => {
mediaRecorder.stop();
const blob = new Blob(chunks, { type: 'audio/webm' });
const url = URL.createObjectURL(blob);
console.log('录音完成,可播放:', url);
}, 3000);
常见注意事项
-
不自动播放:生成的
stream不会发声,必须显式用于录制、传输或赋给媒体元素 -
无音频设备输出:若想同时听到声音,需额外将信号也连到
audioCtx.destination -
采样率继承上下文:输出流采样率与
AudioContext一致(通常 48kHz 或 44.1kHz),不可单独设置 -
仅音频轨道:
dest.stream默认只含音频;如需音视频合并,需手动组合已有视频流
和 AudioWorklet / ScriptProcessorNode 的区别
MediaStreamAudioDestinationNode 是“被动出口”,不做自定义音频处理;若需实时分析、修改音频数据(如加混响、FFT 分析),应搭配 AudioWorklet + AudioWorkletNode,再将处理后的输出接至 MediaStreamDestination。
立即学习“前端免费学习笔记(深入)”;


















