Music fun

Fun with music analysis

HTML

<center>
    <div id="audiocontainer">
        <audio id="music" preload="auto" controls="true">
            <source src="http://pause-geek.fr/audio/temp/sample.mp3" />
            <source src="http://pause-geek.fr/audio/temp/sample.wav" />
            <source src="http://pause-geek.fr/audio/temp/sample.ogg" />
        </audio>
    </div>
    <canvas id="canvas" width="200" height="200"></canvas>
    <div id="debug">Please wait a bit</div>
</center>

CSS

body {
  background: url(http://monpremiersiteinternet.com/wp-content/themes/mpsiv3/images/bg.jpg);
  color: #fff;
  text-shadow: 1px 1px 3px black;
  margin: 0;
}
a {
  color: #bfb;
}
canvas {
  border: 1px solid black;
  margin: 15px 0 0 0;
}

JavaScript

var sqrt = Math.sqrt;
var PI2 = 2 * Math.PI;
function fok(f) { return f in window && typeof window[f] === 'function'; }
var actx,
    node,
    processor,
    $canvas,
    canvas,
    $audio,
    audio,
    ctx,
    audioReady = false;
var frameBufferSize = 4096,
    channels = 4,
    bufferSize = frameBufferSize / channels,
    signal = new Float32Array(bufferSize),
    fft = new FFT(bufferSize, 44100),
    magnitude = [],
    amplitude = 0,
    duration = 0.02;
var currentAngle = 0,
    angleSpeedReal = 0,
    angleSpeedNeed = 0,
    circleLeft,
    circleTop,
    midHeight;
//beatState = true;
//Tentacle
var tNumSeg = 20,
    tPos = [],
    tSegLength = 5,
    tTarget,
    tTargetSens = 1;
for(var ti = 0; ti < tNumSeg; ti++)
    tPos[ti] = {x: 0, y: 0, a: 0, l: tSegLength};
function tReach(p)
{
    var target = jQuery.extend({}, p), seg, i;
    for(i = 0; i < tNumSeg; i += 1)
    {
        seg = tPos[i];
        seg.a = Math.atan2(target.y - seg.y, target.x - seg.x);
        target.x -= seg.l * Math.cos(seg.a);
        target.y -= seg.l * Math.sin(seg.a);
    }
    for(i = tNumSeg - 1; i >= 1; i -= 1)
    {
        seg = tPos[i];
        tPos[i - 1].x = seg.x + seg.l * Math.cos(seg.a);
        tPos[i - 1].y = seg.y + seg.l * Math.sin(seg.a);
    }
}
function tDraw()
{
    var lWBack = ctx.lineWidth;
    ctx.strokeStyle = 'white';
    var seg;
    for(var i = 0; i < tNumSeg; i+= 1)
    {
        ctx.lineWidth = i*0.6+1;
        ctx.beginPath();
        seg = tPos[i];
        ctx.moveTo(seg.x, seg.y);
        ctx.lineTo(seg.x + seg.l * Math.cos(seg.a), seg.y + seg.l * Math.sin(seg.a));
        ctx.stroke();
    }
    ctx.lineWidth = lWBack;
}
var $debug;
function debug(s){ $debug.html(toString(s)); }
function toString(o) { if(typeof(o) === 'object'){var r=''; for(var p in o)r+=p+' : '+o[p]+'<br>'; return r;} return o; }
function random(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
//var trigger;
function processAudio(e)
{
    var...