Audio Visualizer

var resolution = 50;

var col;

var col2;

​

var colWave;

​

var intervall;

​

//slider

var slider;

var alphaSlider;

​

//checkboxes

var micBox;

var micOutBox;

​

//sound

var music;

var fft;

var mic;

​

function preload() {

  music = loadSound('04-lift_me_up.mp3'); //by GlitchxCity

}

​

function setup() {

  fullscreen();

  rectMode(CENTER);

  //set the colors

  col = color(0, 255, 0);

  col2 = color(0, 255, 0, 50);

  colWave = color(200, 0, 0, 150);

  //create the sliders

  slider = createSlider(20, 1000, 500, 1);

  slider.style('width', '300px');

   slider.position(width/2 - 300/2, height -height*0.1);

  alphaSlider = createSlider(0, 255, 50, 1);

  alphaSlider.style('width', '300px');

  alphaSlider.position(width/2 - 300/2, height - height*0.2);

  //Checkboxes

  micBox = createCheckbox('Mic input', false);

  micBox.style('color', color(255));

  micBox.changed(enableMic);

  micBox.position(width/2 - 300/2, height -height*0.15);

  micOutBox = createCheckbox('Output mic input', false);

  micOutBox.style('color', color(255));

  micOutBox.changed(enableMicOut);

  micOutBox.position(width/2 - 300/2 + 150, height -height*0.15);

  calcValues();

  //Music

  fft = new p5.FFT();

  mic = new p5.AudioIn();

  mic.connect(fft);

  music.play();

}

​

function draw() {

  background(0, alphaSlider.value());

  calcValues();

  //visualize

  visualizeSpectrum();

  visualizeWaveform();

}

​

function calcValues() {

  resolution = slider.value();

  intervall = width/resolution;

}

​

function visualizeSpectrum() {

  //make spectrum usable

  var spectrum = fft.analyze();

  var specInter = floor(spectrum.length/resolution);

  var reducedSpec = [];

  for(var i = 0; i < resolution; i++) {

    reducedSpec.push(spectrum[i*specInter]);

  }

  //draw the spectrum visualizer

  for(var i = 0; i < resolution; i++) {

    var y = map(reducedSpec[i], 0, 255, 0, height/2);  

    push();

    translate(intervall/2 + i*intervall, height/2);

    stroke(col2);

    strokeWeight(intervall);

    noFill();

    rect(0, 0, 0, y+intervall);

    stroke(col);

    strokeWeight(2);

    noFill();

    rect(0, 0, intervall, y);

    pop();

  }

}

​

function visualizeWaveform() {

  //make waveform usable

  var waveform = fft.waveform();

  var waveInter = floor(waveform.length/(resolution+1)); //resolution +1 so a vertex gets drawn at the edge of the screen

  var reducedWave = [];

  for(var i = 0; i < resolution+1; i++) {

    reducedWave.push(waveform[i*waveInter]);

  }

  //draw waveform

  beginShape();

  noFill();

  stroke(colWave);

  strokeWeight(4);

  for(var i = 0; i < resolution+1; i++) {

    var y = map(reducedWave[i], -1, 1, height/2 - height/4, height/2 + height/4);  

    vertex(intervall*i, y);

  }

    endShape();

}

​

function enableMic() {

  if (this.checked()) {

    music.stop();

    mic.start();

  } else {

    //mic.stop(); //currently not working in Chrome

    music.play();

  }

}

​

function enableMicOut() {

  if (this.checked()) {

    mic.connect();

  } else {

    music.disconnect(); //This doesn't seem to work either...

  }

}