let snare;

let hh;

let clap;

​

function preload() {

  kick = loadSound("kick.mp3");

  snare = loadSound("snare.mp3");

  hh = loadSound("hh.mp3");

  clap = loadSound("clap.mp3");

}

​

function setup() {

  createCanvas(400, 400);

  analyzerKick = new p5.Amplitude();

  analyzerKick.setInput(kick);

  analyzerSnare = new p5.Amplitude();

  analyzerSnare.setInput(snare);

  analyzerHh = new p5.Amplitude();

  analyzerHh.setInput(hh);

  analyzerClap = new p5.Amplitude();

  analyzerClap.setInput(clap);

}

​

function draw() {

  background(220);

    // get volume reading from the p5.Amplitude analyzer

  let levelKick = analyzerKick.getLevel();

​

  // use level to draw a green rectangle

  let levelHeightKick = map(levelKick, 0, 0.4, 0, height);

  fill(100, 250, 100);

  rect(0, height, .24*width, -levelHeightKick);

   // get volume reading from the p5.Amplitude analyzer

  let levelSnare = analyzerSnare.getLevel();

​

  // use level to draw a green rectangle

  let levelHeightSnare = map(levelSnare, 0, 0.4, 0, height);

  fill(100, 250, 100);

  rect(.25*width, height, .24*width, -levelHeightSnare);

     // get volume reading from the p5.Amplitude analyzer

  let levelHh = analyzerHh.getLevel();

​

  // use level to draw a green rectangle

  let levelHeightHh = map(levelHh, 0, 0.4, 0, height);

  fill(100, 250, 100);

  rect(.5*width, height, .24*width, -levelHeightHh);

       // get volume reading from the p5.Amplitude analyzer

  let levelClap = analyzerClap.getLevel();

​

  // use level to draw a green rectangle

  let levelHeightClap = map(levelClap, 0, 0.4, 0, height);

  fill(100, 250, 100);

  rect(.75*width, height, .24*width, -levelHeightClap);

}

​

// function mousePressed() {

// }

​

function keyTyped() {

  if (key === 'a') {

    kick.play();

  }

   if (key === 'k') {

    snare.play();

  }

  if (key === 'w') {

    hh.play();

  }

  if (key === 'f') {

    clap.play();

  }

}