Audio Visualization

HTML

<audio src="https://r3---sn-30a7ynee.googlevideo.com/videoplayback?expire=1536443711&id=o-ALsxObU8BmIa4HUPQoQPPBUZlY8LsZO5xvnOWUnIc1jZ&ei=3_CTW_-ZKZaM1AbdraSgAg&lmt=1515481889923147&ip=110.4.45.47&initcwndbps=1083750&sparams=clen%2Cdur%2Cei%2Cgir%2Cid%2Cinitcwndbps%2Cip%2Cipbits%2Citag%2Ckeepalive%2Clmt%2Cmime%2Cmm%2Cmn%2Cms%2Cmv%2Cpl%2Crequiressl%2Csource%2Cexpire&source=youtube&pl=21&c=WEB&keepalive=yes&fvip=3&ipbits=0&mm=31%2C26&mime=audio%2Fwebm&clen=4734433&requiressl=yes&ms=au%2Conr&mv=m&mt=1536421976&dur=282.821&gir=yes&itag=251&mn=sn-30a7ynee%2Csn-npoe7ne7&key=yt6&signature=02E8EE091F7CC4A8CF116B04A05A4FFD2EC23F89.059BF4CF1481F6F564F6378C623ED38412B69D4E&ratebypass=yes" controls="controls"></audio>

CSS

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

canvas {
    background: #fff;
    margin: 0;
    padding: 0;
    position: absolute;
}

JavaScript

// Declare Global Variables
var canvas,
    $canvas,
    canvasHeight, 
    canvasWidth,
    ctx;

// Sine wave
var amplitude = 0,
    frequency = .009,
    phase = 0,
    phaseInc = 0;

function setupCanvas() {
    // Create canvas element and add it to the page
    $canvas = $('<canvas>', {
        id: 'grapher'
    }).prependTo('body');

    // Get the canvas element itself, not the jQuery wrapper
    canvas = $canvas[0];
    ctx = canvas.getContext('2d');
    resizeCanvas();
}

function resizeCanvas() {
    canvasHeight = $(window).height();
    canvasWidth = $(window).width();

    $canvas.attr('height', canvasHeight);
    $canvas.attr('width', canvasWidth);

    var xMin = 0, xMax = canvasWidth;
    var yMin = 0, yMax = canvasHeight;
}

function plot(x) {
    var equation = (amplitude * Math.sin(frequency * x + phase)),
        equation2 = (amplitude * Math.sin((frequency + 2) * x + phase));

    if (equation > equation2) {
        var y = equation;
    } else {
        var y = equation2;
    }
    // Place zero in the center of the y axis 
    y = y + canvasHeight / 2;
    return y;
}

function drawPath() {
    // Erase
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);

    ctx.beginPath();
    for(var i=0;i<=canvasWidth;i++) {
       ctx.lineTo(i, plot(i)); 
    }
    ctx.lineTo(i, canvasHeight);
    ctx.stroke();
    // ctx.lineTo(0, canvasHeight);
    // ctx.lineTo(0, plot(0));
    // ctx.fill();
    // ctx.closePath();
    phase += phaseInc; 
}

function mouseEffects(e) {
    var mouseX = e.pageX,
        mouseY = e.pageY,
        ampMin = 1,
        ampMax = 200,
        ampRange = ampMax - ampMin,
        y = canvasHeight - mouseY;
    
    amplitude = y / (canvasHeight / ampRange) + ampMin;

    var phaseIncMin = -.1, phaseIncMax = .1;
    var phaseIncRange = phaseIncMax - phaseIncMin;
    var x = mouseX;
    phaseInc = x / (canvasWidth / phaseIncRange) + phaseIncMin;
}


$(document).ready(function(){
    setupCanvas();
    drawPath();
   ...