javascript - 如何为 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
}