let buttonDown;

let monoSynth;

​

function preload() {

  buttonUp = loadImage('ButtonUp.png');

  buttonDown = loadImage('ButtonDown.png');

}

​

function setup() {

  createCanvas(1024, 356);

  monoSynth = new p5.MonoSynth();

}

​

function draw() {

  background(0, 200, 255);

  if (mouseX > 48 && mouseX < 204 && mouseY < 286 && mouseY > 60 && mouseIsPressed) {

    image(buttonDown, 0, 30, 256, 256);

    playSynth('C4', 0.5);

  } else {

    image(buttonUp, 0, 30, 256, 256);

  }

  if (mouseX > 304 && mouseX < 460 && mouseY < 286 && mouseY > 60 && mouseIsPressed) {

    image(buttonDown, 256, 30, 256, 256);

    playSynth('D4', 0.5);

  } else {

    image(buttonUp, 256, 30, 256, 256);

  }

  if (mouseX > 560 && mouseX < 716 && mouseY < 286 && mouseY > 60 && mouseIsPressed) {

    image(buttonDown, 512, 30, 256, 256);

    playSynth('E4', 0.5);

  } else {

    image(buttonUp, 512, 30, 256, 256);

  }

  if (mouseX > 816 && mouseX < 972 && mouseY < 286 && mouseY > 60 && mouseIsPressed) {

    image(buttonDown, 768, 30, 256, 256);

    playSynth('F4', 0.5);

  } else {

    image(buttonUp, 768, 30, 256, 256);

  }

}

​

function playSynth(n, vol) {

  userStartAudio();

  monoSynth.play(n, vol);

}