Music Play/Pause Button

tawn

Hey i want a Play/Pause button in my Visualizer can you help me??

import ddf.minim.*;
import ddf.minim.analysis.*;
import ddf.minim.effects.*;
import ddf.minim.signals.*;
import ddf.minim.spi.*;
import ddf.minim.ugens.*;

PImage hintergrund;

Minim minim;
AudioPlayer Player;
FFT fft;
int w;
int farbe;


void setup()
{
  size(500,300,P3D);
  minim = new Minim(this);
  Player = minim.loadFile("bla.mp3"); // Spielt die Mp3 datei ab
  Player.loop(); // Wiederholt den aktuellen Song
  fft = new FFT(Player.bufferSize(), Player.sampleRate());
  fft.logAverages(60, 7);
  stroke(255);
  w = width/fft.avgSize();
  strokeWeight(w);
  strokeCap(SQUARE);
  farbe = 0;

}

void draw()
{
  hintergrund = loadImage("hintergrund.jpg");
  image(hintergrund,0,0);

  fft.forward(Player.mix);

  colorMode(HSB);
  stroke(farbe, 255, 255);
  colorMode(RGB);

  for(int i = 0; i < fft.avgSize(); i++){
    line((i * w)*3, height/1.1, (i * w)*3, height/1.1 - fft.getAvg(i) * 0.5);

}

  farbe += 5;
  if( farbe > 255)
  {
    farbe = 0;
  }
}

This is atm my Code also i would donate a few euro if you can help me :)

kfrajer

Move line 35 to your setup() because you don't want to do this in draw().

For play/pause:

void mouseReleased()
{
  if ( Player.isPlaying() )
  {
    Player.pause();
  }
  else
  {    
    Player.loop();
  }
}

For more information about Minim, check their reference: http://code.compartmental.net/minim/

Kf

tawn

hey thank you for the fast answer

the void mouseReleased is really great but how can i implate there a Button?

because now the Song stops everytime i klick with my mouse but i want to press a Button

greetings

colouredmirrorball

You can check if your mouseX and mouseY values are within some values before calling Player.pause() or Player.loop().

kfrajer

You can use the following code:

class Button {
  String label;
  float x;      
  float y;    
  float w;    
  float h;    

  // constructor
  Button(String labelB, float xpos, float ypos, float widthB, float heightB) {
    label = labelB;
    x = xpos;
    y = ypos;
    w = widthB;
    h = heightB;
  }

  void Draw() {
    fill(218);
    stroke(141);
    rect(x, y, w, h, 10);
    textAlign(CENTER, CENTER);
    fill(0);
    text(label, x + (w / 2), y + (h / 2));
  }

  boolean MouseIsOver() {
    if (mouseX > x && mouseX < (x + w) && mouseY > y && mouseY < (y + h)) {
      return true;
    }
    return false;
  }
}

Now you can use it in the following way:

Button b1;

void setup() {
  size(600, 400);
  rectMode(CORNER);
  textAlign(CENTER, CENTER);
  b1=new Button("Tap me!", width*0.2, 200, width*0.6, 50);

  //  Other coce OMMITED for simplicity
}

void draw() {
  background(92);
  b1.Draw();

  //  Other coce OMMITED for simplicity

}

void mouseReleased()
{
  if (b1.MouseIsOver()==true) {
    if ( Player.isPlaying() )
   {
      Player.pause();
    }
    else
    {    
      Player.loop();
    }
  }
}

Kf

kfrajer

You could also use G4P or controlP5. If you install the libraries using the Processing IDE's library manager, you can have a look at the provided examples. Alternatively, you can do a search on the forum and you could see previous posts:

https://forum.processing.org/two/search?Search=G4P
https://forum.processing.org/two/search?Search=controlP5

Kf

tawn

ill try to implate your code into mine but dosent work :( the code looks complicated is there a way who is moore simple ^^ ??