使用Javascript将mp3编码的数据添加到现有的mp3文件中

我有一个现有的mp3编码音频blob（1）和一个新录制的mp3音频数据（2），我想连接（1）和（2）以产生一个新的mp3 blob（3），其中我将用作html5播放器/录音机中音频标记的源

我正在使用

ConcatenateBlobs

函数连接一个blob数组，结果blob是（3）

（3） 具有正确的音频持续时间；因为它的持续时间为（1）+（2）。 虽然（3）可播放，但在（2）部分开始时停止

 //////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();

---

我想知道这样做的正确方法。

mp3文件开头有ID3标签吗？如果是这样，您可能必须删除第二个文件的前128字节（只是猜测它会起作用，需要确认）。（1）表示服务器上完全独立的mp3文件（2）也是服务器上的独立mp3，因此是的，两者都有ID3标记。您认为是删除（1）中的前128个，然后将其添加到（2），我想我只能通过修改上面的函数才能做到这一点？不，不行，我使用的是16kbps的mp3和chrom，firefox抛出TypeError:（中间值）。slice不是一个函数。好吧，这很奇怪，我只是用16kbps的声音（带ID3标签）试过，它在Chrome45中对我有效。顺便说一下，我说的是

.slice（4）

，因为我声音的

Uint8Array

s在索引4之后有零，但我认为128应该是正确的值。对于Firefox，似乎有一个标签。mp3文件的开头有ID3标签吗？如果是这样，您可能必须删除第二个文件的前128字节（只是猜测它会起作用，需要确认）。（1）表示服务器上完全独立的mp3文件（2）也是服务器上的独立mp3，因此是的，两者都有ID3标记。您认为是删除（1）中的前128个，然后将其添加到（2），我想我只能通过修改上面的函数才能做到这一点？不，不行，我使用的是16kbps的mp3和chrom，firefox抛出TypeError:（中间值）。slice不是一个函数。好吧，这很奇怪，我只是用16kbps的声音（带ID3标签）试过，它在Chrome45中对我有效。顺便说一下，我说的是

.slice（4）

，因为我声音的

Uint8Array

s在索引4之后有零，但我认为128应该是正确的值。对于Firefox来说，似乎存在着一个问题。