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

您将从getUserMedia获取localStream，并从onaddstream事件监听器获取remoteStream。

您可能只想传递阵列中的音轨。剩下的一切都是如此。 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被调用了两次，但是第一个视频可以播放并且可以正常工作，而第二个视频可以播放但是（不到一秒钟）可能已损坏。

干杯！

如何合并两个音频文件-JavaScript？

2 个答案: