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

【问题标题】：How I can merge two audio files - JavaScript?如何合并两个音频文件 - JavaScript？
【发布时间】：2020-02-14 07:50:09
【问题描述】：

我有来自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);

【问题讨论】：

当您说合并时，您的意思是连接两个音频文件，还是以不同的方式合并它们？
感谢您的回复。我想将它们结合起来，因为音频文件包含对话。例如 audio1 提出问题，然后audio2 给出答案。
我只在本地尝试了ffmpeg，但是如何在实时服务器上配置它？
仅供参考，这里有一个类似的问题，答案不同：stackoverflow.com/questions/55165335/…

标签： javascript laravel webrtc record video-conferencing

【解决方案1】：

您可以使用类似的库：MediaStreamRecorder。然后使用 MultiStreamRecorder 并传递两个流，如下所示，

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

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

您可能只想传递数组中的音轨。其余的一切照旧。不需要 FFmpeg 和文件合并。

【讨论】：

谢谢@ishan，但我对如何检测它是localStream还是remoteStream有点困惑？
您能帮帮我吗？我被困在这个问题上。我是 javascript 新手，也是这个库的新手。
您在 getUserMedia 方法中获得的流是您的 localStream，而您在 onaddstream 侦听器中获得的流是您的 remoteStream。
可以用这段代码获取remoteStreams$('#remoteVideos video')[0]。最多 8 个远程流。
哦，我的错。最好的方法是什么？使用addStreams?你能给出示例代码吗？

【解决方案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 被调用了两次，但是第一个视频可以播放并且正常工作，而第二个视频可以播放但是（不到一秒）我认为可能是损坏。

干杯！

【讨论】：

改用变量。声明一个 blob 数组，并在获取数据时将其推入其中。比如，recorder.ondataavailable = blob =>recordedBlobs.push(blob);
好的，谢谢.. 然后我想通过 ajax 将它上传到我的服务器。可以在ondataavailable函数里面调用吗？
是的，没关系。如果有帮助，请接受我的回答。
嗨@ishanshah，在我将blob保存在服务器上后，它可以播放，但是当我刷新视频通话时，它不再工作了，上面写着Your file was not found (It may have been moved or deleted)