I don't what I'm doing

waveform_visualiser.js

var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(document.querySelector('video'));
var analyser = audioCtx.createAnalyser();

source.connect(analyser);
analyser.connect(audioCtx.destination);

// FFTSize to analyse
analyser.fftSize = 8192;
// analyser.smoothingTimeConstant = 0.2;

Math.map = function(val, v_min, v_max, m_min, m_max) {
    // Make this range into (0..1)
    val = (val - v_min) / (v_max - v_min);

    // Convert the range to (m_min..m_max)
    return m_min + val * (m_max - m_min);
}

document.querySelector('#secondary').innerHTML = `<canvas id='cv'></canvas>`;
var ctx = document.querySelector('#cv').getContext('2d');
var WIDTH = ctx.canvas.width,
    HEIGHT = ctx.canvas.height;

var bl_w = 0.5;

var n_bins = analyser.fftSize; // Analysed fftSize
var fftData = new Float32Array(n_bins); // The arrray to store (-1.0..1.0) values.

var sliceWidth = WIDTH / n_bins;

(function() {
    requestAnimationFrame(arguments.callee);
    
    // 'X', 'Y' coordinate
    var x = 0;
    var y;

    analyser.getFloatTimeDomainData(fftData);
    
//  ctx.clearRect(0, 0, WIDTH, HEIGHT);
//  ctx.beginPath();
//  fftData.forEach((bin, idx) => {
//      y = (0.5 + bin) * HEIGHT;

//      if(idx === 0)
//          ctx.moveTo(x, y);
//      else
//          ctx.lineTo(x, y);

//      x+= sliceWidth;
//  });
//  ctx.stroke();

    ctx.clearRect(0, 0, WIDTH, HEIGHT);
    fftData.forEach((bin) => {
        // y = Math.map(bin, 0, 255, 0, HEIGHT);

		var tmp = (bin < 0) ? Math.abs(bin) : bin;

		y = (bin + tmp) * HEIGHT;
		
        // ctx.fillRect(x, HEIGHT-y, sliceWidth, y);
        ctx.fillRect(x, HEIGHT/2 - y/2, sliceWidth, y);
		ctx.fillRect(x, HEIGHT/2 - bl_w/2, sliceWidth, bl_w);
        x+= sliceWidth;
    });
})();

MANAAA

Masterpiece which got bootleg'd