# Buttons how to play and pause sound/music

**URL:** https://discourse.processing.org/t/buttons-how-to-play-and-pause-sound-music/40205
**Category:** Libraries
**Created:** [December 18, 2022, 11:15pm UTC](https://discourse.processing.org/t/buttons-how-to-play-and-pause-sound-music/40205 "2022-12-18T23:15:22Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)
#### Post date: [December 18, 2022, 11:15pm UTC](https://discourse.processing.org/t/buttons-how-to-play-and-pause-sound-music/40205/1 "2022-12-18T23:15:22Z")

</div>

Hi there,  
I am building this code and i just fixed 4 button on rigth side. When clicked turns white.  
I Would like to make them play a sound when cliked and pause, diferent sounds for each one of them.  
What should i do?  
Thanks guys.

```auto
import processing.sound.*;
SoundFile soundfile;
PImage et;
float opacity = 0;
PImage img; 
PImage txt;
PImage trc;
boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

//botoes
int value1 = 0;
int value2 = 0;
int value3 = 0;
int value4 = 0;

void setup() {
  size(600, 600);

  // soundfile = new SoundFile(this, "fabFX.mp3");
  // soundfile.loop();

  //images
  trc = loadImage("Trance3.png");
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png"); // Load the image into the program
  et.resize(258, 458);
}

void draw() {
  background(0); // total canva black

  // rect flahing/blinking
  int m = millis();
  fill(m % 200); // velocity of flashs **not working good** maybe my computer..
  rect(25, 25, 555, 555, 30);
  //image(et, 130, 125 );
  // image(txt, 50, 40);

  //rgb
  tint(20, 17, 247, 100); // Alpha to 102 without changing the tint
  image(et, 140, 125 );
  tint(255, 0, 0, 80); // Tint to yellow, alpha to 153
  image(et, 120, 125 );

  //opacity
  if (opacity < 255) { // When less than the maximum,
    opacity += 0.5; // increase opacity
  }
  tint(255, opacity);
  image(et, 130, 125 );
  image(txt, 50, 40);
  image(trc, 85, 130);

  //buttons draws
  fill(value1);
  rect(500, 200, 50, 50, 30);
  fill(value2);
  rect(500, 300, 50, 50, 30);
  fill(value3);
  rect(500, 400, 50, 50, 30);
  fill(value4);
  rect(500, 500, 50, 50, 30);

  //ciercle flow with mouse
  noFill();
  stroke(255);
  ellipse(mouseX, mouseY-55, 200, 200);

  //button link to web page
  if (overButton == true) {
    int m4 = millis();
    fill(m4 % 150);
    circle(260, 230, 30);
    cursor(CROSS);
  } else {
    noStroke();
    noFill();
    cursor(HAND);
  }
}

//circle(260, 230, 30);

void mouseReleased() {

  loop();

 if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 200)&(mouseY <= 230)) {
    if (value1 == 255) {
      value1 = 0;
    } else {
      value1 = 255;
    }
    println("btn1 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 300)&(mouseY <= 330)) {
    if (value2 == 255) {
      value2 = 0;
    } else {
      value2 = 255;
    }
    println("btn2 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 400)&(mouseY <= 430)) {
    if (value3 == 255) {
      value3 = 0;
    } else {
      value3 = 255;
    }
    println("btn3 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 500)&(mouseY <= 530)) {
    if (value4 == 255) {
      value4 = 0;
    } else {
      value4 = 255;
    }
    println("btn4 hit.");
  }
}
void mousePressed() {
  if (overButton) {
    link("https://www.youtube.com/playlist?list=PL087855B0290C2154");
    link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK3aWfOtz0-wEpL6fkvZiBB");
  }
}

void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}

void checkButtons() {
  if (mouseX > 200 && mouseX-40 < 300 && mouseY+35 > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

```

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [December 19, 2022, 1:46am UTC](https://discourse.processing.org/t/buttons-how-to-play-and-pause-sound-music/40205/2 "2022-12-19T01:46:38Z")

</div>

Try telling it to play whatever sound you want when a button is pressed: [https://processing.org/reference/libraries/sound/SoundFile\_play\_.html](https://processing.org/reference/libraries/sound/SoundFile_play_.html)

---

<div class="post-metadata">

### Author: ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)
#### Post date: [December 19, 2022, 4:55pm UTC](https://discourse.processing.org/t/buttons-how-to-play-and-pause-sound-music/40205/3 "2022-12-19T16:55:36Z")

</div>

Hi @svan , thank you for your time.  
I did try it befour. I do not know how to triguer/play the sound/music when a specific button is pressed, Btn1 and so on.  
How to call this function\*(play/stop song) for each button and each sound going to play?

Should i up load the 4 songs into “setup”, like

"soundfile = new SoundFile (this, “…mp3”);  
and the:  
“soundfile.play();”

into each one of these. If so, i will need to declare a name for each "soundfile.play(); ?!

```auto
void mouseReleased() {

  loop();

 if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 200)&(mouseY <= 230)) {
    if (value1 == 255) {
      value1 = 0;
    } else {
      value1 = 255;
    }
    println("btn1 hit.");
  }

```

If you see, on top is there:

```auto
"import processing.sound.*;
SoundFile soundfile;"

```

And in Setup they are there but with //.

```auto
"void setup() {
  size(600, 600);

  // soundfile = new SoundFile(this, "fabFX.mp3");
  // soundfile.loop();"

```

Sorry… this is a bit confusede, i doing my best… tks 😀

But if i leave this way, the sound starts as soon as i press play in the sketch. And it can not happen.

---

<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: [December 19, 2022, 5:31pm UTC](https://discourse.processing.org/t/buttons-how-to-play-and-pause-sound-music/40205/4 "2022-12-19T17:31:58Z")

</div>

you need to load 4 different sound files in setup() and then start one when  
you press a button

later you can say

```auto
if (soundfile3.isPlaying()) {
    soundfile3.stop(); 
else {
    soundfile3.play(); 
}

```

also you can stop all songs before starting a new file.

**Full Sketch:**

```auto

import processing.sound.*;

SoundFile soundfile0, 
  soundfile1, 
  soundfile2, 
  soundfile3;

PImage et;
float opacity = 0;
PImage img; 
PImage txt;
PImage trc;
boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

//botoes
int value1 = 0;
int value2 = 0;
int value3 = 0;
int value4 = 0;

void setup() {
  size(600, 600);

  soundfile0 = new SoundFile(this, "fabFX.mp3");
  soundfile1 = new SoundFile(this, "fab1.mp3");
  soundfile2 = new SoundFile(this, "fabFX.mp3");
  soundfile3 = new SoundFile(this, "fab1.mp3");

  //images
  trc = loadImage("Trance3.png");
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png"); // Load the image into the program
  et.resize(258, 458);
}

void draw() {
  background(0); // total canva black

  // rect flahing/blinking
  int m = millis();
  fill(m % 200); // velocity of flashs **not working good** maybe my computer..
  rect(25, 25, 555, 555, 30);
  //image(et, 130, 125 );
  // image(txt, 50, 40);

  //rgb
  tint(20, 17, 247, 100); // Alpha to 102 without changing the tint
  image(et, 140, 125 );
  tint(255, 0, 0, 80); // Tint to yellow, alpha to 153
  image(et, 120, 125 );

  //opacity
  if (opacity < 255) { // When less than the maximum,
    opacity += 0.5; // increase opacity
  }
  tint(255, opacity);
  image(et, 130, 125 );
  image(txt, 50, 40);
  image(trc, 85, 130);

  //buttons draws
  fill(value1);
  rect(500, 200, 50, 50, 30);
  fill(value2);
  rect(500, 300, 50, 50, 30);
  fill(value3);
  rect(500, 400, 50, 50, 30);
  fill(value4);
  rect(500, 500, 50, 50, 30);

  //ciercle flow with mouse
  noFill();
  stroke(255);
  ellipse(mouseX, mouseY-55, 200, 200);

  //button link to web page
  if (overButton == true) {
    int m4 = millis();
    fill(m4 % 150);
    ellipse(260, 230, 30, 0);
    cursor(CROSS);
  } else {
    noStroke();
    noFill();
    cursor(HAND);
  }
}

//circle(260, 230, 30);

void mouseReleased() {

  loop();

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 200)&(mouseY <= 230)) {
    soundfile0.play(); 
    if (value1 == 255) {
      value1 = 0;
    } else {
      value1 = 255;
    }
    println("btn1 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 300)&(mouseY <= 330)) {
    soundfile1.play();
    if (value2 == 255) {
      value2 = 0;
    } else {
      value2 = 255;
    }
    println("btn2 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 400)&(mouseY <= 430)) {
    soundfile2.play();
    if (value3 == 255) {
      value3 = 0;
    } else {
      value3 = 255;
    }
    println("btn3 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 500)&(mouseY <= 530)) {
    soundfile3.play();
    if (value4 == 255) {
      value4 = 0;
    } else {
      value4 = 255;
    }
    println("btn4 hit.");
  }
}
void mousePressed() {
  if (overButton) {
    link("https://www.youtube.com/playlist?list=PL087855B0290C2154");
    link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK3aWfOtz0-wEpL6fkvZiBB");
  }
}

void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}

void checkButtons() {
  if (mouseX > 200 && mouseX-40 < 300 && mouseY+35 > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = 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: [December 19, 2022, 8:48pm UTC](https://discourse.processing.org/t/buttons-how-to-play-and-pause-sound-music/40205/5 "2022-12-19T20:48:43Z")

</div>

continued elsewhere

see [Buttons play and pause](https://discourse.processing.org/t/buttons-play-and-pause/40215)