After we arrange the layout as i describe on my post before, it's time to create the button can be pressed. Before it, i want explain that the picture can't be identified as button, so for make it function like button, we just need to create click area sith position of image. If you don't understand, just read my code bellow for understand. On this part, i just make some button function, like play, pause, stop, openfile.

Let start the code! Adding java swing library for browse music file. The code look like this

import javax.swing.*;
JFileChooser jfc;

Declarate the JFileChooser for choosing music player on public void like this
jfc = new JFileChooser();
Initialization variable looping and playing with boolean before void setup

boolean isPlaying;
boolean isLooping;

Add event when mouse click on coordinate area

void mouseClicked(){

Adding into event mouse click for previous button

 if(mouseX > 15 && mouseX < 15+prev.width && mouseY > 104 && mouseY < 104+prev.height){
    println("tombol previous telah ditekan");

Adding into event mouse click for play or pause

  if(mouseX > 35 && mouseX < 35+play.width&& mouseY > 104 && mouseY < 104+play.height){
    if(isPlaying){
      isPlaying = false;
      player.pause();
    }else{
      isPlaying = true;
      player.play();
    }
  }

Adding into event mouse click for stop

if(mouseX > 55 && mouseX < 55+stop.width && mouseY > 104 && mouseY < 104+stop.height){
    if(isPlaying){
      isPlaying = false;
      player.pause();
      player.rewind();
    }
  }

Adding into event mouse click for next

 if(mouseX > 75 && mouseX < 75+next.width && mouseY > 104 && mouseY < 104+next.height){
    println("tombol next telah ditekan");
  }

Adding into event mouse click for repeat

 if(mouseX > 210 && mouseX < 210+repeat.width && mouseY > 104 && mouseY < repeat.height + 104){
    println("tombol repeat ditekan");
    isLooping = true;

Adding into event mouse click for browse file

if(mouseX > 120 && mouseX < 120+openfile.width && mouseY > 104 && mouseY < 104+openfile.height){
    println("tombol open file telah ditekan");
    int result = jfc.showOpenDialog(this);
    if( result == jfc.APPROVE_OPTION){
      String filename = jfc.getSelectedFile().getAbsolutePath();
      println(filename);
      player.close();
      player = minim.loadFile(filename);
      player.play();
    }
  }

And don't forget to adding this script into void draw. Because this script will be change the image button when music play or pause

if(isPlaying){
    image(pause, 35, 104);
  }else{
    image(play, 35, 104);
  }

Not all button function can be clicked, you can check my code of this step bellow. For next code i will try to make all button can be used :D. I hope, you can understand with this tutorial. Happy trying.

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

import javax.swing.*;
JFileChooser jfc;

PImage bg;
PImage seeker;
PImage seeker2;
PImage closeButton;
PImage minimizeButton;
PImage prev;
PImage play;
PImage stop;
PImage next;
PImage openfile;
PImage shuffle;
PImage repeat;
PImage pause;
PFont font;


Minim minim;
AudioPlayer player;
double duration;
AudioMetaData meta;
boolean isPlaying;
boolean isLooping;


void setup(){
  size(375, 120, P2D);
  
  minim = new Minim(this);
  player = minim.loadFile("glow.mp3");
  player.play();
  duration = player.length();
  isPlaying = true;
 
  font = (loadFont("Ubuntu-20.vlw"));
  textMode(SCREEN);
  
  bg = loadImage("main.png");
  seeker = loadImage("seeker.png");
  seeker2 = loadImage("seeker2.png");
  closeButton = loadImage("closeButton.png");
  minimizeButton = loadImage("minimizeButton.png");
  
  prev = loadImage("prev.png");
  play = loadImage("play.png");
  stop = loadImage("stop.png");
  next = loadImage("next.png");
  
  openfile = loadImage("openfile.png");
  shuffle = loadImage("shuffle.png");
  repeat = loadImage("repeat.png");
  pause = loadImage("pause.png");
  
  jfc = new JFileChooser();
}

void mouseClicked(){
  if(mouseX > 15 && mouseX < 15+prev.width && mouseY > 104 && mouseY < 104+prev.height){
    println("tombol previous telah ditekan");
  }
  
  if(mouseX > 35 && mouseX < 35+play.width && mouseY > 104 && mouseY < 104+play.height){
    if(isPlaying){
      isPlaying = false;
      player.pause();
    }else{
      isPlaying = true;
      player.play();
    }
  }
 
  if(mouseX > 55 && mouseX < 55+stop.width && mouseY > 104 && mouseY < 104+stop.height){
    if(isPlaying){
      isPlaying = false;
      player.pause();
      player.rewind();
    }
  }
  
  if(mouseX > 75 && mouseX < 75+next.width && mouseY > 104 && mouseY < 104+next.height){
    println("tombol next telah ditekan");
  }
  
  //repeat
  if(mouseX > 210 && mouseX < 210+repeat.width && mouseY > 104 && mouseY < repeat.height + 104){
    println("tombol repeat ditekan");
    isLooping = true;
   
  }
    
  if(mouseX > 120 && mouseX < 120+openfile.width && mouseY > 104 && mouseY < 104+openfile.height){
    println("tombol open file telah ditekan");
    int result = jfc.showOpenDialog(this);
    if( result == jfc.APPROVE_OPTION){
      String filename = jfc.getSelectedFile().getAbsolutePath();
      println(filename);
      player.close();
      player = minim.loadFile(filename);
      player.play();
    }
  }
}

void draw(){
  meta=player.getMetaData();
  image(bg,0,0);
  //seeker bar
  image(seeker, (int)(player.position()/duration*(bg.width-seeker.width)), 84);
  image(seeker2, 300,105);
  
  //close & minimize
  image(closeButton, 350, 5);
  image(minimizeButton, 335,5);
  
  //player
  image(prev, 15, 105);
  image(play, 35, 105);
  image(stop, 55, 105);
  image(next, 75, 105);
  image(openfile, 120, 105);
  image(shuffle, 160, 105);
  image(repeat, 210, 105);
  
  if(isPlaying){
    image(pause, 35, 104);
  }else{
    image(play, 35, 104);
  }
}