Waveform/Time-Domain view of a YouTube video's audio stream

YTWaveForm.js

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

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

    analyser.fftSize = 1024;
    // 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);
    }

	var cc_width  = 350, 
		cc_height = 150;


	/* The canvas to show waveforms */
	var canvas = document.createElement('canvas');
	var canvasContainer = document.createElement('div');

	canvasContainer.classList.add('html5-video-info-panel');
	canvasContainer.style.width  = `${cc_width}px`;
	canvasContainer.style.height = `${cc_height}px`;
	canvasContainer.style.background = "rgba(0, 0, 0, 0.4)";

	canvas.width  = cc_width;
	canvas.height = cc_height;

    // Override the visualizer with stats
    document.querySelector('.html5-video-container')
	.prepend(canvasContainer);
	canvasContainer.append(canvas);
    
    var ctx = canvas.getContext('2d');
    var WIDTH = ctx.canvas.width,
        HEIGHT = ctx.canvas.height;

    var bl_w = 0.5;

    ctx.fillStyle    =  "rgba(250, 20, 20)";
    ctx.strokeStyle  =  "rgb(250, 25, 25)";

	ctx.lineJoin     =  "miter";

    var n_bins = analyser.fftSize;
    var fftData = new Float32Array(n_bins);

    var sliceWidth = WIDTH / n_bins;

    (function() {
        requestAnimationFrame(arguments.callee);

        // 'X', 'Y' coordinate
        var x = 0;
        var y;

        // Float (Time Domain) Data.
        analyser.getFloatTimeDomainData(fftData);
        ctx.clearRect(0, 0, WIDTH, HEIGHT);

		ctx.fillText("+1.0", 0, 10.0);
		ctx.fillText("±0.0", 0, (HEIGHT/2)+2.5);
		ctx.fillText("-1.0", 0, HEIGHT);

        ctx.beginPath();
        fftData.forEach((bin, idx) => {
            // y = (bin < 0) ? Math.abs(bin) * HEIGHT : bin * HEIGHT;
			y = Math.map(bin, -1.0, +1.0, 0, HEIGHT);
            if(idx === 0)
               ctx.moveTo(x, y);
            else
               ctx.lineTo(x, y);


			// ctx.fillRect(x, HEIGHT/2 - y/2, sliceWidth, 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) / 2) * 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;
    //     });
    })();