FFT

FFT example

Your browser does not support the canvas element.
var audio = new maximJs.maxiAudio();
audio.init();

var fft = new maximJs.maxiFFT();
// var ifft = new maximJs.maxiIFFT();
// var mffc = new maximJs.maxiMFFC();

var osc = new maximJs.maxiOsc();

var fftSize = 1024;
var sampleRate = 44100;

var magMult = 6;

var count = 0;
var updateIncr = 50;
var ignoreCount = false;

var bars = [];
var barsBottom = 600;
var barsLeft = 50;

window.onload = setup;
function setup(){
	fft.setup(fftSize, 512, 256);
	// ifft.setup(fftSize, 512, 256);
    // mfcc.setup(512, 42, 13, 20, 20000, sampleRate);

	// This gets the window in the browser
	var canvas=document.getElementById("myCanvas");

	// This creates a 2d drawing context in it.
	context=canvas.getContext("2d");

	//finally, we return setInterval, which wants a function to call,
	//and a period in milliseconds to wait between calling it.
	return setInterval(draw, 40);
}


audio.play = function(){
	// create wave for fft
	var wave = osc.square(220);

	// process wave
	if(fft.process(wave)){
		fft.magsToDB();
		count++; // increment counter
	}

	this.output = wave;

}

//The stuff inside the script tag is very similar to processing code.
function draw() {

//This is basically the same as any other 2D processing draw routine.
//clear the screen
context.clearRect(0,0,700,700);

for(var i=0; i < fftSize / 2; i++) {
	context.beginPath();
	context.fillStyle="#FF0000";
	context.rect(barsLeft + i, barsBottom, 1, -(fft.getMagnitude(i) * magMult));
	context.fill();
	// context.stroke();
	context.closePath();
}
}