Buttons how to play and pause sound/music

Processing Libraries
1

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.

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

Try telling it to play whatever sound you want when a button is pressed: https://processing.org/reference/libraries/sound/SoundFile_play_.html

3

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(); ?!

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:

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

And in Setup they are there but with //.

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


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

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

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

4

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

later you can say

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

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

Full Sketch:



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;
  }
}
1 Like
5

continued elsewhere

see Buttons play and pause