MediaStreamTrackGenerator 仅在 Chrome 124+ 可用且仅支持音频,需启用实验标志,必须传入 AudioData 类型的 writable stream,时间戳须严格递增并匹配采样率,生成轨道需通过 MediaStream、AudioContext 或 MediaRecorder 验证。

MediaStreamTrackGenerator 在 Chrome 124+ 才可用,且仅支持音频
目前(截至 2024 年中),MediaStreamTrackGenerator 是实验性 API,仅在 Chromium 124+ 启用,需手动开启 chrome://flags/#enable-experimental-web-platform-features。它**不支持视频轨道生成**——传入 { kind: 'video' } 会直接抛出 NotSupportedError。你只能用它封装一个 WritableStream 来产生音频轨道。
构造时必须传入 audio WritableStream,且 chunk 类型受限
创建 MediaStreamTrackGenerator 实例时,writable 选项必须是一个 WritableStream,其写入的 chunk 必须是 AudioData 实例(不能是 ArrayBuffer、Uint8Array 或其他类型)。否则会在 writer.write() 时抛出 TypeError: Failed to execute 'write' on 'WritableStreamDefaultWriter': parameter 1 is not of type 'AudioData'。
实操建议:
- 用
new AudioContext()创建上下文,并调用audioContext.createAnalyser()等辅助手段生成测试数据,或用AudioWorklet生成合成音频 - 通过
new AudioData({ ... })构造合法 chunk:必须指定format(如'f32-planar')、sampleRate、numberOfFrames、numberOfChannels和timestamp - 确保
timestamp严格递增,单位为毫秒;若乱序或重复,轨道可能静音或中断
写入频率必须匹配采样率,否则触发 underflow
MediaStreamTrackGenerator 内部按时间戳驱动播放,如果写入 AudioData 的间隔远大于应有间隔(例如采样率 48000 Hz 时,每帧应约 20.83 ms 写一次),就会出现音频卡顿、跳帧甚至自动终止。浏览器不会缓冲大量帧,它期望稳定的流速。
立即学习“前端免费学习笔记(深入)”;
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
实操建议:
- 计算目标间隔:
1000 / sampleRate * numberOfFrames(单位 ms);例如 48kHz、128 帧 → ≈2.67ms/帧 - 用
requestAnimationFrame不够准,改用setTimeout或setInterval配合performance.now()做误差补偿 - 首次写入前,先
await writable.ready,避免早期丢帧 - 不要在单次循环里批量写入多帧——这会导致时间戳突变,被判定为不连续流
生成的轨道无法直接预览,需接 AudioContext 或 MediaRecorder
MediaStreamTrackGenerator 返回的 MediaStreamTrack 是“源头轨道”,没有内置播放能力。调用 track.clone() 或设 track.enabled = false 都不会报错但无效;track.readyState 始终为 'live',但 track.getSettings() 可能返回空对象。
要验证是否工作,必须将其加入实际媒体上下文:
- 方式一:
const stream = new MediaStream([track]);→ 绑定到<audio srcObject="stream">(注意:Safari 不支持,仅 Chromium) - 方式二:用
AudioContext.createMediaStreamSource(stream)接后续节点(如gainNode),再连destination - 方式三:传给
MediaRecorder录制,检查输出 blob 是否有有效音频数据(推荐用于调试)
容易忽略的一点:即使 track 已添加到 stream,<audio> 元素也需用户手势触发播放(如点击按钮调用 play()),否则静音。


















