Create Music Player with Processing Part II

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


4 Responses to "Create Music Player with Processing Part II"

  1. thanks a lot for this post :) really helped with my project, i'll be sure to give you credit!!

    ReplyDelete
  2. You are welcome :)
    I can't wait release of your project :D

    ReplyDelete
  3. Thats really help full thanks

    can u also put up the first part? where u explain how u designed the layout n th ebuttons of the player?

    ReplyDelete
    Replies
    1. I am sorry, something wrong with my blog and the first part is gone. But i've write it with Bahasa Indonesia, you can read: http://www.panduaji.net/2012/05/membuat-musik-player-dengan-processing.html . if you confuse, you can translate it into english using google translate. I hope you can read the code and understand.

      I am downloading winamp skin an make little part from the image.

      Delete