1

I have an existing mp3 encoded audio blob(1) and a newly recodred mp3 audio data(2), I want to concatenate (1) and (2) resulting in a new mp3 blob(3) of which I will use as a source for the audio tag in my html5 player/recorder.

I'm using the ConcatenateBlobs function to concatenate an array of blobs which the resulting blob is (3).

(3) has correct audio duration; because it has the duration of (1)+(2). Although (3) is playable but stops when the (2) part starts.

 //////Concatenate blobs////////////////
 (function() {
  window.ConcatenateBlobs = function(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 concatenateBuffers() {
        var byteLength = 0;
        buffers.forEach(function(buffer) {
            byteLength += buffer.byteLength;
        });

        var tmp = new Uint8Array(byteLength);
        var lastOffset = 0;
        buffers.forEach(function(buffer) {
            // BYTES_PER_ELEMENT == 2 for Uint16Array
            var reusableByteLength = buffer.byteLength;
            if (reusableByteLength % 2 !== 0) {
                buffer = buffer.slice(0, reusableByteLength - 1);
            }
            tmp.set(new Uint8Array(buffer), lastOffset);
            lastOffset += reusableByteLength;
        });

        var blob = new Blob([tmp.buffer], {
            type: type
        });

        callback(blob);
    }
};
})();
/////////////////where i use ConcatenateBlobs function////////////////

var old_blob;
var xhr = new XMLHttpRequest();
xhr.open('GET', $('.player audio source').attr("src"), true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
    if (this.status === 200) {

        console.log("THE NEW RECORDED TRACK = " + blob.size);
        old_blob = this.response;
        console.log("THE LOADED TRACK = " + old_blob.size);
        ConcatenateBlobs([old_blob, blob], 'audio/mp3', function(resultingBlob) {
            console.log("THE RESULTING BLOB = " + resultingBlob.size);
            var url = URL.createObjectURL(resultingBlob);
             console.log("THE RESULTING BLOB = " + resultingBlob.size);
            $('.player audio source').attr("src", url);
            audio.load();
        });
    }
};
xhr.send();

I want to know what's the correct way of doing this.

Jalal Sordo
  • 1,605
  • 3
  • 41
  • 68
  • 1
    Do the mp3 files have ID3 tags at the beginning? If so, you might have to remove the first 128 bytes of the second file (Just guessing it would work, needs confirmation). – blex Sep 10 '15 at 18:29
  • (1) indicates to a fully standalone mp3 file on the server which definietly has ID3 tags (2) is also a standalone mp3 on the server, so yes Both has ID3 Tags. – Jalal Sordo Sep 10 '15 at 18:33
  • You think is remove the first 128 of (1) and add it to (2), i think i can do that only by modifying that function above? – Jalal Sordo Sep 10 '15 at 18:34
  • Nope it doesn't i'm using 16 kbps mp3 and chrom, and firefox throws TypeError: (intermediate value).slice is not a function. – Jalal Sordo Sep 10 '15 at 18:57
  • Ok, that's weird, I just tried it with 16kbps sounds (with ID3 tags), and it works for me in Chrome 45. By the way, I said `.slice(4)` because the `Uint8Array`s of my sounds had zeros after index 4, but I think 128 should be the right value. For Firefox, there seems to be a [shim for `Uint8Array.prototype.slice`](http://stackoverflow.com/a/10101213/1913729). – blex Sep 10 '15 at 19:02
  • i tried it on and it's the same result, when the player reaches the start of (2) it gets stuck, i think a major change should be made on the function where it should truncate the first 128 bytes of each file and create the ID3 tag of (3) and set (1) plus (2) as Mp3 encoded audio data of (3). – Jalal Sordo Sep 10 '15 at 19:10

0 Answers0