CODEWITHSUNDEEP
javascriptnode.jsaudioffmpegrecorder.js
PixelPioneer
PixelPioneer

Reputation: 4170

Concatenating audio blobs

I tried concatenating audio blobs using Web RTC experiment by Muaz Khan, but when I play the concatenated audio, the HTML audio element does not show the full length of the audio file and also if you download and play, the issue will persist. I used ffmpeg to concate these blobs, though is there a way which can be used for concatenating audio blobs using the Web RTC js experiment by Muaz Khan. A similar attempt which also did not work out : Combine two audio blob recordings

Upvotes: 1

Views: 4008

Answers (1)

Hamza Ali
Hamza Ali

Reputation: 36

The best way is to convert the blobs into AudioBuffers (Convert blob into ArrayBuffer using FileReader and then decode those arrayBuffers into AudioBuffers). You can then merge/combine more than one AudioBuffers and get the resultant. Following code will work in such situation:

var blob="YOUR AUDIO BLOB";
var f = new FileReader();
    f.onload = function (e) {

    audioContext.decodeAudioData(e.target.result, function (buffer) {


            arrayBuffer.push(buffer);



        if (arrayBuffer.length > 1) {
            resultantbuffer = appendBuffer(arrayBuffer[0], arrayBuffer[1]);
            arrayBuffer = [];
            arrayBuffer.push(resultantbuffer);
        }
        else {
            resultantbuffer = buffer;
        }


    }, function (e) {
        console.warn(e);
    });
};
f.readAsArrayBuffer(blob);

This code read the blob and convert into arrayBuffer (e.target.result) and decode those buffers into AudioBuffers (buffer). I used appendBuffer method for appending more than one audioBuffers. Here is the method:

function appendBuffer(buffer1, buffer2) {

    ///Using AudioBuffer
    var numberOfChannels = Math.min(buffer1.numberOfChannels, buffer2.numberOfChannels);
    var tmp = recordingAudioContext.createBuffer(numberOfChannels, (buffer1.length + buffer2.length), buffer1.sampleRate);
    for (var i = 0; i < numberOfChannels; i++) {
        var channel = tmp.getChannelData(i);
        channel.set(buffer1.getChannelData(i), 0);
        channel.set(buffer2.getChannelData(i), buffer1.length);
    }
    return tmp;

}

Do let me know if you face any problem.

Upvotes: 1

Related Questions