Микширование аудио элементов в одно место назначения потока для использования с MediaRecorder - PullRequest
Новая
       34

Микширование аудио элементов в одно место назначения потока для использования с MediaRecorder

0 голосов
/ 09 января 2019

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

Ответы [ 2 ]

0 голосов
/ 24 января 2019

Что если вы создадите узел усиления и подключите к нему исходные узлы: 

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

и в цикле 

SourceNode[i].connect(gain);

Затем ваши источники поступают в один узел усиления, который направляется к вашему месту назначения.

0 голосов
/ 15 января 2019

Я бы сделал это так: 

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] получить первый звук MediaStreamTrack из этого MediaStream. В любом случае он только один.

Теперь, я полагаю, вы можете сделать что-то вроде stream.addTrack(mediaStreamDestination.stream.getAudioTracks()[0]), передав звуковую дорожку выше.

...