let started = false;

​

function preload() {

  song = loadSound('https://cdn.glitch.com/ce69db36-acda-4006-b5ff-676dca4d95ba%2FCat%20Choir.mp3?v=1608328030444');

}

​

function setup() {

  let can = createCanvas(600, 600);

​

  // create a new Amplitude analyzer

  analyzer = new p5.Amplitude();

​

  // set the song you loaded earlier as input

  analyzer.setInput(song);

​

  // just some fills and styles

  textSize(24);

  fill("red");

  background(255, 230, 230);

  stroke('black');

​

  //tell people you need to click to start

  text("Click to start", width / 2 - 70, height / 4)

}

​

//start the song on mouse click

function mouseClicked() {

  if (!started) {

    song.loop();

    started = true;

  }

}

​

function draw() {

​

  //we can't start the song until

  //the player clicks on the page

  if (!started) {

    return;

  }

​

  background(255, 230, 230);

​

  // Get the average (root mean square) amplitude

  let rms = analyzer.getLevel();

​

  let circleDiameter = map(rms, 0, 1, 20, 400);

  circle(width / 2, height / 2, circleDiameter);

  // uncomment the block below if you want 

  // to see how mouse position can change the sound

​

  // let volume = map(mouseY, 0, height, 1.5, 0.3);

  // volume = constrain(volume, 0.3, 1.5)

  // song.amp(volume);

  // let speed = map(mouseX, 0, width, 0.9, 1.15);

  // speed = constrain(speed, 0.9, 1.15)

  // song.rate(speed);

​

}