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

Question

我有两个来自本地和远程流RecordRTC音频文件。现在我想将两个文件合并为一个文件，并通过 AJAX 将其上传到服务器。

例如(音频 1.webm(和(音频 2.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被调用了两次，但第一个视频可以播放并且工作正常，而第二个视频可以播放，但(不到一秒钟(我认为它可能已损坏。

干杯！