您如何将多个音轨合并为一个用于 mediaRecorder API？

Question

我想进行录音，从不同的 mediaStream 对象（其中一些，远程）获得多个音轨。使用 getAudioTracks() 方法并使用 addTrack() 将它们添加到 mediaStream 对象。在将最后一个对象作为 mediaRecorder 的参数传递时，我意识到它只记录位于 [0] 位置的音轨。这让我明白 mediaRecorder 能够按类型录制曲目，有没有办法将这些曲目合并为一个曲目以使用 mediaRecorder 正确录制它们？如果可能并且如果它存在，我将不胜感激任何解释这一点的页面

Answer 1

我为此挣扎了一段时间，花了很长时间才意识到 MediaStream 只录制了我添加的第一首曲目。我的解决方案是让Web Audio API参与进来。此示例使用两个 UserMedia（例如麦克风和立体声混音）并将它们合并。UserMedia 由它们标识，deviceId如您使用时所示await navigator.mediaDevices.enumerateDevices()。

总之：

• 创建一个 AudioContext()
• 使用您的媒体 navigator.mediaDevices.getUserMedia()
• 将这些作为流源添加到 AudioContext
• 创建一个 AudioContext 流目标对象
• 将您的来源连接到这个单一目的地
• 并且您的新 MediaRecorder() 将此目的地作为其 MediaStream

现在，您可以在播放时录制自己与您最喜欢的歌曲一起唱歌；)

const audioContext = new AudioContext();
audioParams_01 = {
    deviceId: "default",
}
audioParams_02 = {
    deviceId: "7079081697e1bb3596fad96a1410ef3de71d8ccffa419f4a5f75534c73dd16b5",
}

mediaStream_01 = await navigator.mediaDevices.getUserMedia({ audio: audioParams_01 });
mediaStream_02 = await navigator.mediaDevices.getUserMedia({ audio: audioParams_02 });

audioIn_01 = audioContext.createMediaStreamSource(mediaStream_01);
audioIn_02 = audioContext.createMediaStreamSource(mediaStream_02);

dest = audioContext.createMediaStreamDestination();

audioIn_01.connect(dest);
audioIn_02.connect(dest);

const recorder = new MediaRecorder(dest.stream);

chunks = [];

recorder.onstart = async (event) => {
    // your code here
}

recorder.ondataavailable = (event) => {       
    chunks.push(event.data); 
}

recorder.onstop = async (event) => {
    // your code here
}

Answer 2

完成使用 muazKhan 构建的库，它允许您合并流并将它们返回到一个中！

这非常简单！

https://github.com/muaz-khan/MultiStreamsMixer