如何录制Canvas中镜像播放视频的原始最大音量？

• 核心问题：你当前从video元素捕获的音频流已经被其volume属性缩放，录制出的音量会跟随这个设置变化。直接拉满gainNode的maxValue会导致音频采样值超出正常范围（通常为[-1,1]），进而出现破音。

• 可行解决方案：

  1. 绕过video元素的音量控制，直接加载原始音频资源
     不要复用video元素的音频输出，重新获取原始音频文件并用独立AudioContext处理：

     // 替换为你的原始视频/音频地址
     const audioResponse = await fetch('原始媒体资源地址');
     const audioBuffer = await audioResponse.arrayBuffer();
     const audioCtx = new AudioContext();
     const decodedBuffer = await audioCtx.decodeAudioData(audioBuffer);
     
     // 创建节点播放原始音频
     const sourceNode = audioCtx.createBufferSource();
     sourceNode.buffer = decodedBuffer;
     
     // 保持增益为1，对应原始最大音量
     const gainNode = audioCtx.createGain();
     gainNode.gain.value = 1;
     
     // 连接节点并导出音频流
     sourceNode.connect(gainNode);
     const audioStream = gainNode.context.createMediaStreamDestination().stream;
     gainNode.connect(audioStream);
     
     // 捕获Canvas视频流并合并音视频流
     const canvasStream = canvas.captureStream();
     const combinedStream = new MediaStream([
       ...canvasStream.getVideoTracks(),
       ...audioStream.getAudioTracks()
     ]);
     
     // 初始化录制器
     const recorder = new MediaRecorder(combinedStream);
     

     这种方式录制的音频完全不受video元素当前volume设置影响，保留原始最大音量。

  2. 复用video资源时，获取未缩放的原始音频轨道
     若不想重新加载资源，不要直接使用video.captureStream()的音频轨道（已被volume缩放），而是通过createMediaElementSource获取原始音频：

     const audioCtx = new AudioContext();
     // 获取video元素处理前的原始音频信号
     const source = audioCtx.createMediaElementSource(video);
     
     const gainNode = audioCtx.createGain();
     gainNode.gain.value = 1; // 维持原始音量
     
     source.connect(gainNode);
     const audioStream = gainNode.context.createMediaStreamDestination().stream;
     gainNode.connect(audioStream);
     
     // 后续合并Canvas视频流与该音频流进行录制
     

• 注意事项：

  • 增益值设为1即可对应原始最大音量，超过1可能导致音频采样溢出，引发破音。
  • 确保AudioContext处于running状态（通常需要用户交互触发，比如点击事件），否则无法正常处理音频。

内容的提问来源于stack exchange，提问作者Paul