Is there a way to combine several WAV audio blobs into one cohesive file?

Question

Is there a way to combine several WAV audio blobs into one cohesive file?

Issue I'm Facing:

I am attempting to combine multiple blob audio files into a single blob and then download it on the page.

My Attempts So Far:

I have tried to merge the Audio blobs using the following methods:

Method - 1:

const url = window.URL.createObjectURL(new Blob(fullBlobArray), {
                    type: 'audio/*'
                });
const a = document.createElement("a");
                document.body.appendChild(a);
                a.style = "display: none";
                a.href = url;
                a.download = "testing.wav";
                a.click();
                URL.revokeObjectURL(url);
                a.remove();

Method - 2 (Utilizing ConcatenateBlobs.js plugin - ConcatenateJS)

ConcatenateBlobs(fullBlobArray, 'audio/wav', function (fullBlob) {
                    const url = window.URL.createObjectURL(fullBlob);
                    const a = document.createElement("a");
                    document.body.appendChild(a);
                    a.style = "display: none";
                    a.href = url;
                    a.download = "testing.wav";
                    a.click();
                    URL.revokeObjectURL(url);
                    a.remove();

                    //Close the window after download.
                    window.close();

Explanation of Output:

If you have these audio blobs:

[audio1, audio2, audio3]

After executing the above code for download, only the Audio from the first file (i.e. audio1 ) is being played. However, the full blob's size encompasses the total size of audio1 + audio2 + audio3

I am unable to identify where the issue lies. Your assistance in resolving this matter would be greatly appreciated.

javascript blob

Answer 1

Answer №1

At last, I have discovered a solution! Credit goes to this informative article on StackOverflow. A big thanks to the authors for putting in the effort to create this valuable resource.

I want to extend my gratitude to those who commented out (@Bergi, @Zac, @Peter Krebs in the comments) highlighting the importance of formatting the blob according to WAV Format.

If you are looking to merge multiple WAV files into a single file, below is the code snippet:

wav_merger.js

// Insert code here
// More code snippets can be added

custom_script.js

// In this segment, we extract buffer from blobs and trigger download
getBufferFromBlobs(fullBlobArray).then(function (singleBlob) {
    const url = window.URL.createObjectURL(singleBlob);
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    a.href = url;
    a.download = "testing.wav";
    a.click();
    URL.revokeObjectURL(url);
    a.remove();
});

Answer 2

At last, I have discovered a solution! Credit goes to this informative article on StackOverflow. A big thanks to the authors for putting in the effort to create this valuable resource.

I want to extend my gratitude to those who commented out (@Bergi, @Zac, @Peter Krebs in the comments) highlighting the importance of formatting the blob according to WAV Format.

If you are looking to merge multiple WAV files into a single file, below is the code snippet:

wav_merger.js

// Insert code here
// More code snippets can be added

custom_script.js

// In this segment, we extract buffer from blobs and trigger download
getBufferFromBlobs(fullBlobArray).then(function (singleBlob) {
    const url = window.URL.createObjectURL(singleBlob);
    const a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";
    a.href = url;
    a.download = "testing.wav";
    a.click();
    URL.revokeObjectURL(url);
    a.remove();
});

Answer 3

Answer №2

I encountered a similar issue and want to express my gratitude to @Vikash for bringing it up here. Currently, I am utilizing the ConcatenateBlobs.js script to concatenate wav blobs, which seems to only function correctly on Chrome. While your solution is commendable, I found the source code to be slightly lengthy. Therefore, I attempted to modify ConcatenateBlobs.js by addressing the file length discrepancy in the header. Fortunately, my modifications were successful:

    function ConcatenateBlobs(blobs, type, callback) {
        var buffers = [];

        var index = 0;

        function readAsArrayBuffer() {
            if (!blobs[index]) {
                return concatenateBuffers();
            }
            var reader = new FileReader();
            reader.onload = function(event) {
                buffers.push(event.target.result);
                index++;
                readAsArrayBuffer();
            };
            reader.readAsArrayBuffer(blobs[index]);
        }

        readAsArrayBuffer();


        function audioLengthTo32Bit(n) {
            n = Math.floor(n);
            var b1 = n & 255;
            var b2 = (n >> 8) & 255;
            var b3 = (n >> 16) & 255;
            var b4 = (n >> 24) & 255;
         
            return [b1, b2, b3, b4];
        }
        function concatenateBuffers() {
            var byteLength = 0;
            buffers.forEach(function(buffer) {
                byteLength += buffer.byteLength;
            });

            var tmp = new Uint8Array(byteLength);
            var lastOffset = 0;
            var newData;
            buffers.forEach(function(buffer) {
                if (type=='audio/wav' && lastOffset >  0) newData = new Uint8Array(buffer, 44);
                else newData = new Uint8Array(buffer);
                tmp.set(newData, lastOffset);
                lastOffset += newData.length;
            });
            if (type=='audio/wav') {
                tmp.set(audioLengthTo32Bit(lastOffset - 8), 4);
                tmp.set(audioLengthTo32Bit(lastOffset - 44), 40); // update audio length in the header
            }
            var blob = new Blob([tmp.buffer], {
                type: type
            });
            callback(blob);         
            
        }
    }

Answer 4

I encountered a similar issue and want to express my gratitude to @Vikash for bringing it up here. Currently, I am utilizing the ConcatenateBlobs.js script to concatenate wav blobs, which seems to only function correctly on Chrome. While your solution is commendable, I found the source code to be slightly lengthy. Therefore, I attempted to modify ConcatenateBlobs.js by addressing the file length discrepancy in the header. Fortunately, my modifications were successful:

    function ConcatenateBlobs(blobs, type, callback) {
        var buffers = [];

        var index = 0;

        function readAsArrayBuffer() {
            if (!blobs[index]) {
                return concatenateBuffers();
            }
            var reader = new FileReader();
            reader.onload = function(event) {
                buffers.push(event.target.result);
                index++;
                readAsArrayBuffer();
            };
            reader.readAsArrayBuffer(blobs[index]);
        }

        readAsArrayBuffer();


        function audioLengthTo32Bit(n) {
            n = Math.floor(n);
            var b1 = n & 255;
            var b2 = (n >> 8) & 255;
            var b3 = (n >> 16) & 255;
            var b4 = (n >> 24) & 255;
         
            return [b1, b2, b3, b4];
        }
        function concatenateBuffers() {
            var byteLength = 0;
            buffers.forEach(function(buffer) {
                byteLength += buffer.byteLength;
            });

            var tmp = new Uint8Array(byteLength);
            var lastOffset = 0;
            var newData;
            buffers.forEach(function(buffer) {
                if (type=='audio/wav' && lastOffset >  0) newData = new Uint8Array(buffer, 44);
                else newData = new Uint8Array(buffer);
                tmp.set(newData, lastOffset);
                lastOffset += newData.length;
            });
            if (type=='audio/wav') {
                tmp.set(audioLengthTo32Bit(lastOffset - 8), 4);
                tmp.set(audioLengthTo32Bit(lastOffset - 44), 40); // update audio length in the header
            }
            var blob = new Blob([tmp.buffer], {
                type: type
            });
            callback(blob);         
            
        }
    }

Is there a way to combine several WAV audio blobs into one cohesive file?

Answer №1

Answer №2

Similar questions

Guide on utilizing exported API endpoint in Node and Express

The steps to display a partial view within another view in React Native

The absence of data in a c# web api controller is causing issues with jQuery AJAX post requests

What is the process for using AJAX and PHP to upload an image file?

Having difficulty creating the probot.github app due to an error: The removal of the programmatic API in npm version 8.0.0 causing failure

The initial value for the `useState` is not defined at the

Enhance the app.get response by integrating data fetched from an http.get request

Using JavaScript to Retrieve, Manipulate, and Merge JSON Data from Various Files

Error encountered while attempting to retrieve an environment variable: Invalid token found

Please refrain from submitting the form until the slow AJAX jQuery process has finished

Unveiling the secret to accessing properties using v-if within a custom component template relocation

Checking jquery validation on a field when it contains input

Transferring the link value to an AJAX function when the onclick event is triggered

There appears to be a malfunction with WebRupee

Changing a button's value on click using PhoneGap

Filtering rows of an HTML table that contain links in the `<href>` column data in real time

Tips for formatting a phone number using regular expressions in [Vue 2]

Exploring the capabilities of Vue.js, including the use of Vue.set()

Prevent the box from closing automatically after submitting a form using jQuery

Upon inserting Node 5, an error with the code EINVALIDTYPE occurred in npm