How to make a button have sound

Processing Libraries
3

here is a basic sketch - NOT TESTED

search “!!!” to see the cool bits

it loads 6 files you have to provide into 2 arrays

it plays only the 1st file from each array - to do…

you could use an index for each array: int indexList1 and indexList2 and then say
when button is clicked

    fileList1[indexList1].play();  // !!!!!!!!!!!!!!!!!!!!!!!!!!!
     
    indexList1++; 
    if(indexList1>2)
       indexList1 = 0;

Chrisir


// !!!!!!!!!!!!!!!!!!!!!!!!!!!
import processing.sound.*;
SoundFile[] fileList1 = new SoundFile[3];
SoundFile[] fileList2 = new SoundFile[3];
// !!!!!!!!!!!!!!!!!!!!!!!!!!!

int rectX, rectY; // Position of square button
int circleX, circleY; // Position of circle button
int rectSize = 90; // Diameter of rect
int circleSize = 93; // Diameter of circle
color rectColor, circleColor, baseColor;
color rectHighlight, circleHighlight;
color currentColor;
boolean rectOver = false;
boolean circleOver = false;

void setup() {
  size(640, 360);
  rectColor = color(1220);
  rectHighlight = color(#08FA72);
  circleColor = color(1220);
  circleHighlight = color(#FA08DE);
  baseColor = color(100);
  currentColor = baseColor;
  circleX = width/2+circleSize/2+10;
  circleY = height/2;
  rectX = width/2-rectSize-10;
  rectY = height/2-rectSize/2;
  ellipseMode(CENTER);

  // Load a soundfile from the /data folder of the sketch // !!!!!!!!!!!!!!!!!!!!!!!!!!!
  fileList1[0] = new SoundFile(this, "sample0.mp3");
  fileList1[1] = new SoundFile(this, "sample1.mp3");
  fileList1[2] = new SoundFile(this, "sample2.mp3");

  fileList2[0] = new SoundFile(this, "sample3.mp3");
  fileList2[1] = new SoundFile(this, "sample4.mp3");
  fileList2[2] = new SoundFile(this, "sample5.mp3");
}

void draw() {
  update(mouseX, mouseY);
  background(currentColor);

  if (rectOver) {
    fill(rectHighlight);
  } else {
    fill(rectColor);
  }
  stroke(255);
  rect(rectX, rectY, rectSize, rectSize);

  if (circleOver) {
    fill(circleHighlight);
  } else {
    fill(circleColor);
  }
  stroke(0);
  ellipse(circleX, circleY, circleSize, circleSize);
}

void update(int x, int y) {
  if ( overCircle(circleX, circleY, circleSize) ) {
    circleOver = true;
    rectOver = false;
  } else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
    rectOver = true;
    circleOver = false;
  } else {
    circleOver = rectOver = false;
  }
}

void mousePressed() {
  if (circleOver) {
    currentColor = #FA8917;
    fileList1[0].play();  // !!!!!!!!!!!!!!!!!!!!!!!!!!!
  }
  if (rectOver) {
    currentColor = rectColor;
    fileList2[0].play();    // !!!!!!!!!!!!!!!!!!!!!!!!!!!
  }
}

boolean overRect(int x, int y, int width, int height) {
  if (mouseX >= x && mouseX <= x+width &&
    mouseY >= y && mouseY <= y+height) {
    return true;
  } else {
    return false;
  }
}

boolean overCircle(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}
1 Like