How I can merge two audio files - JavaScript?

Question

I have two audio files from RecordRTC both local & remote streams. Now I want to merge the two files into one file and upload it to the server via AJAX.

e.g. (audio1.webm) and (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);
        }
    });
});

Thank you in advance.

UPDATE:

I made it this way instead of recorder.addStreams, and still I can get the recorded.

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

You can use a similar library: MediaStreamRecorder. Then use MultiStreamRecorder and pass two streams as below,

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

You will get localStream from getUserMedia and remoteStream from onaddstream event listener.

You may want to just pass the audio tracks in the array. The rest of the things as it is. FFmpeg and file merging is not necessary.