# How to make a button have sound

**URL:** <https://discourse.processing.org/t/how-to-make-a-button-have-sound/10576>\
**Category:** Libraries\
**Created:** [April 23, 2019, 4:44pm UTC](https://discourse.processing.org/t/how-to-make-a-button-have-sound/10576 "2019-04-23T16:44:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![lillexi2u](https://avatars.discourse-cdn.com/v4/letter/l/ac8455/32.png) [@lillexi2u](https://discourse.processing.org/u/lillexi2u)\
**Post date:** [April 23, 2019, 4:44pm UTC](https://discourse.processing.org/t/how-to-make-a-button-have-sound/10576/1 "2019-04-23T16:44:35Z")

</div>

Hi, I’m working on a video game project where I have to incorporate sound, so far I have both of the buttons but cannot figure out how to make each buttons have 3 sets of sounds when clicked on. so far this is all I have. Can someone help me code each button to have 3 sounds.

```auto
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);
}

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;
  }
  if (rectOver) {
    currentColor = rectColor;
  }
}

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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 23, 2019, 6:29pm UTC](https://discourse.processing.org/t/how-to-make-a-button-have-sound/10576/2 "2019-04-23T18:29:00Z")

</div>

3 sounds - do you mean one sound randomly from a set of 3 possible sounds

or do you mean like the 1st time I click, sound 1, the 2nd time, sound time, the 3rd time 3, the 4th time 1 again…?

Chrisir

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 23, 2019, 6:37pm UTC](https://discourse.processing.org/t/how-to-make-a-button-have-sound/10576/3 "2019-04-23T18:37:45Z")

</div>

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

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

```

Chrisir

```auto

// !!!!!!!!!!!!!!!!!!!!!!!!!!!
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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![lillexi2u](https://avatars.discourse-cdn.com/v4/letter/l/ac8455/32.png) [@lillexi2u](https://discourse.processing.org/u/lillexi2u)\
**Post date:** [April 24, 2019, 12:33pm UTC](https://discourse.processing.org/t/how-to-make-a-button-have-sound/10576/4 "2019-04-24T12:33:51Z")

</div>

The second option, when I click the button the first time the first file plays then the second and so on and same for the other button.I saw your code will try it out later! Thankyou for helping!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 24, 2019, 12:35pm UTC](https://discourse.processing.org/t/how-to-make-a-button-have-sound/10576/5 "2019-04-24T12:35:23Z")

</div>

> [@lillexi2u](#):
>
> when I click the button the first time the first file plays then the second and so on

see my post above which suggests this.

see

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

```