将音频元素混合到一个流目标中，以便与媒体录制器一起使用

Question

MediaRecorder只允许您为每个轨道录制一种类型的媒体。因此，我正在使用JQuery从所有音频元素中获取列表，并将它们连接到相同的音频上下文目标，以便将所有音轨混合到一个音频流中，以便稍后由MediaRecorder录制。到目前为止，我所拥有的工作，但只捕获了第一首曲目，而没有捕获其他曲目。

知道为什么只有一条轨道通过吗？

我的代码：

function gettracks(stream){
    var i = 0;
    var audioTrack ;
    var audioctx = new AudioContext();
    var SourceNode = [];
    var  dest = audioctx.createMediaStreamDestination();
    $('audio').each( function() {
    //the audio element id
    var afid = $(this).attr('id');
    var audio = $('#'+afid)[0];
    console.log('audio id '+ afid+' Audio= '+audio);
    SourceNode[i] = audioctx.createMediaElementSource(audio);
    //dont forget to connect the wires!
    SourceNode[i].connect(audioctx.destination);
    SourceNode[i].connect(dest);

      audioTrack = dest.stream.getAudioTracks()[0];
    stream.addTrack(audioTrack);
    i++;
    });
    }

//from a mousedown event I call
stream = canvas.captureStream();
video.srcObject = stream;
gettracks(stream);
startRecording()
    function startRecording() {
          recorder = new MediaRecorder(stream, {
        mimeType: 'video/webm'
      });
      recorder.start();
    }

Answer 1

我会这样做：

var ac = new AudioContext();
var mediaStreamDestination = new MediaStreamAudioDestinationNode(ac);
document.querySelectorAll("audio").forEach((e) => {
  var mediaElementSource = new MediaElementAudioSourceNode(ac, { mediaElement: e });
  mediaElementSource.connect(mediaStreamDestination);
});
console.log(mediaStreamDestination.stream.getAudioTracks()[0]); // give this to MediaRecorder

分解上述功能：

• var ac = new AudioContext(); ：创建一个 AudioContext ，以便能够将音频路由到默认音频输出以外的其他内容。
• var mediaStreamDestination = new MediaStreamAudioDestinationNode(ac);从这个AudioContext，得到一种特殊类型的DestinationNode，它不是将AudioContext的输出发送到音频输出设备，而是将其发送到保存单个音频轨道的MediaStream。
• document.querySelectorAll("audio").forEach((e) => { ，获取所有<audio>元素，并迭代它们。
• var mediaElementSource = new MediaElementAudioSourceNode(ac, { mediaElement: e }); ，对于每个媒体元素，捕获其输出并将其路由到AudioContext。这给了你一个AudioNode.
• mediaElementSource.connect(mediaStreamDestination); ，连接具有媒体元素输出的AudioNode，将其连接到我们转到MediaStream的目的地。
• mediaStreamDestination.stream.getAudioTracks()[0]从这个MediaStream获得第一个音频MediaStreamTrack。反正只有一个。

现在，我想你可以做一些类似的事情 stream.addTrack(mediaStreamDestination.stream.getAudioTracks()[0]) ，传入上面的音轨。

Answer 2

如果您创建一个增益节点并将源节点连接到该节点，该怎么办：

var gain = audioctx.createGain();
gain.connect(dest);

并在循环中

SourceNode[i].connect(gain);

然后，您的

源流入单个增益节点，该节点流向您的目的地。