Как я могу объединить два аудио файла - JavaScript?

Question

У меня есть два аудиофайла из RecordRTC как локальных, так и удаленных потоков. Теперь я хочу объединить два файла в один файл и загрузить его на сервер через AJAX.

например, (audio1.webm) и (audio2. webm) .

mediaRecorder.stopRecording(function() {
    var blob = mediaRecorder.getBlob();
    var fileName = getFileName('webm');

    var fileObject = new File([blob], fileName, {
        type: 'audio/webm'
    });

    var formData = new FormData();
        formData.append('blob', fileObject);
        formData.append('filename', fileObject.name);

    $.ajax({
        url: '{{ url('/') }}/save-audio',
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function(response) {
            console.log(response);
        }
    });
});

Заранее спасибо.

ОБНОВЛЕНИЕ:

Я сделал это вместо recorder.addStreams, и до сих пор Я могу получить запись.

var remoteVideos = $('#remoteVideos video');
var el = [];

$.each($('#remoteVideos video'), function(index, val) {
     el[index] = val.srcObject;
});
el.push(stream);
multiMediaRecorder = new MultiStreamRecorder(el);

Answer 1

Вы можете использовать похожую библиотеку: MediaStreamRecorder . Затем используйте MultiStreamRecorder и пропустите два потока, как показано ниже,

recorder = new MultiStreamRecorder([localStream, remoteStream]);

Вы получите localStream из getUserMedia и remoteStream из прослушивателя событий onaddstream.

Возможно, вы захотите просто передать звуковые дорожки в массиве. В остальном все как есть. FFmpeg и объединение файлов не требуется.

Answer 2

Я получил это сейчас, выполнив это, как показано ниже;

function onMediaSuccess(localStream) {

            var remoteVideos = $('#remoteVideos video')[0];
            multiMediaRecorder = new MultiStreamRecorder([localStream, remoteVideos.srcObject]);
            multiMediaRecorder.ondataavailable = function (blob) {
                // POST/PUT "Blob" using FormData/XHR2
                var blobURL = URL.createObjectURL(blob);
                console.log(blobURL);
            };
            multiMediaRecorder.start();
    }

Но теперь есть еще одна проблема: ondataavailable вызывается дважды, но первое видео воспроизводится и работает нормально, а второе видео играбельно, но (менее одной секунды) Я думаю, что оно может быть повреждено.

Ура!