var fft;

var sliderVolume;

// var sliderPan;

var sliderRate;

var buttonShowTime;

var button;

var len;

var volhistory = [];

var rd;

var fft;

var w = 10;

​

// loading file before setup, for sound, video, image

function preload() {

  song = loadSound('adagio.mp3')

}

​

​

​

function setup() {

  createCanvas(800, 800);

  angleMode(DEGREES);

  sliderVolume = createSlider(0,1,0.5,0.01)

  sliderPan = createSlider(-1,1,0,0.01)

  // sliderRate = createSlider(0,2,1,0.01)

  button = createButton("Play");

  button.mousePressed(togglePlay);

  buttonShowTime = createButton("Show time");

  buttonShowTime.mousePressed(showTime);

  fft = new p5.FFT(0,64)

  len = song.duration();

  song.play();

  for (let i = 0; i < len; i += 10) {

    song.addCue(i,changeBackground);

  }

  amp = new p5.Amplitude()

}

function showTime(){

  console.log(song.currentTime())

}

function changeBackground() {

  rd = [random(255),random(255),random(255)];

}

​

function togglePlay(){

  if (!song.isPlaying()){

    song.play();

    button.html("Play");

  } else {

    song.pause();

    button.html("Pause")

  }

}

​

function draw() {

  background(0);

  var vol = amp.getLevel();

  var spectrum = fft.analyze();

  push();

  volhistory.push(vol)

  stroke(255);

  noFill();

  beginShape();

  for (let i = 0; i < width; i++) {

    var h = map(volhistory[i],0,sliderVolume.value(),height,0);

    vertex(i,h);

  }

  endShape();

  if (volhistory.length>width){

    volhistory.splice(0,1)

  }

  pop();

  push();

  fill(255);

  noStroke();

  for (let j = 0; j < spectrum.length; j ++) {

    var v = spectrum[j];

    var y = map(v,0,100,0,height/2)

    rect(width-j*w,0,w,y);

  }

  pop();

  // var dia = map(vol,0,sliderVolume.value(),0,400)

  push();

  translate(width/2,height/2);

  // fill(255,255,255)

  // noStroke();

  // ellipse(0,0,dia,dia);

  beginShape();

  stroke(255)

  noFill();

  for (let i = 0; i < 360; i ++){

    var dia = map(volhistory[i],0,1,0,600)

​

    var x = dia*cos(i);

    var y = dia*sin(i);

    vertex(x,y);

  }

  endShape();

  pop();

  song.setVolume(sliderVolume.value());

  song.pan(sliderPan.value());

  // song.rate(sliderRate.value());

}