将音频元素混合到一个流目标中以与 MediaRecorder 一起使用

Question

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

知道为什么只有一首曲目通过吗？

我的代码：

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);

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

将音频元素混合到一个流目标中以与 MediaRecorder 一起使用

Mixing Audio elements into one stream destination for use with MediaRecorder

html

javascript

html5-audio

web-audio-api