JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dks-portal.de/rc.min.js"></script>
Listen to the difference: <button id="o">Whole block</button><button id="c1">1st half</button><button id="c2">2nd half</button><button id="m">Merged</button><br><br>http://jsfiddle.net/073vzy76/#run

JavaScript

//Generate a continus sinus in 2 arrays
var len = 16384;
//var len = 44000;
var buffer1 = [];
var buffer2 = [];
var buffer = [];
for(var i=0;i<len;i++){
    buffer.push(Math.sin(i/10));
    if(i < len/2)
        buffer1.push(Math.sin(i/10));
    else
        buffer2.push(Math.sin(i/10));
}
//Encode and decode both arrays seperatly
var en = Codec.encode(buffer1);
var dec1 = Codec.decode(en);
dump (dec1);

var en = Codec.encode(buffer2);
var dec2 = Codec.decode(en);
dump(dec2);

//Merge the arrays to 1 output array
var merge = [];
for(var i in dec1)
    merge.push(dec1[i]);

for(var i in dec2)
    merge.push(dec2[i]);

//Generate one big array with the same data as in the two arrays above
var verg = [];
for(var i=0;i<len;i++)
    verg.push(Math.sin(i/10));

//encode and decode the array hole in one
var enV = Codec.encode(verg);
var decV = Codec.decode(enV);
dump(decV);

function dump(a)
{
    var s = "";
    for (var i = 0 ; i != a.length ; i++) s += " "+a[i];
    console.log(s);
}
//-----------------
//Down under is only for playing the 2 different arrays
//-------------------
var audioCtx = new window.AudioContext || new window.webkitAudioContext;
function play (sound)
{
    var audioBuffer = audioCtx.createBuffer(1, sound.length, 44100);
    var bufferData = audioBuffer.getChannelData(0);
    bufferData.set(sound);
    
    var source = audioCtx.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(audioCtx.destination);
    source.start();
}

$("#o").click(function() { play(decV); });
$("#c1").click(function() { play(dec1); });
$("#c2").click(function() { play(dec2); });
$("#m").click(function() { play(merge); });