您如何将多个音轨合并为一个用于 mediaRecorder API? [英] How do you combine many audio tracks into one for mediaRecorder API?

查看:177
本文介绍了您如何将多个音轨合并为一个用于 mediaRecorder API?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I want to make a recording where, I get multiple audio tracks from different mediaStream objects (some of them, remote). Use the getAudioTracks () method and add them to a mediaStream object using addTrack (). At the moment of passing this last object as a parameter for mediaRecorder I realize that it only records the audio track located in position [0]. That gives me to understand that mediaRecorder is capable of recording a track by type, is there any way to join these tracks into one to record them correctly using mediaRecorder? I would be grateful for any page that explains this if possible and if it exists

推荐答案

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

I was battling with this for a while and took me ages to realise that the MediaStream only ever recorded the first track I added. My solution was to get the Web Audio API involved. This example uses two UserMedia (e.g. a mic & Stereo Mix) and merges them. The UserMedia are identified by their deviceId as shown when you use await navigator.mediaDevices.enumerateDevices().

总结:

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

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

Now you can record yourself singing along to your favourite song as it streams ;)

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
}

这篇关于您如何将多个音轨合并为一个用于 mediaRecorder API?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆