Membuat Music Player dengan Processing Part II

Sebelumnya kita sudah membuat layout untuk musik player kita, kini saatnya kita membuat tombol-tombol pada musik player tersebut berfungsi. Sehingga dengan menekan icon play, music akan berjalan dan ketika menekan icon openfile maka akan membuka file musik yang baru.

Tombol yang kita gunakan berupa sebuah gambar, kita tidak bisa menggunakan itu sebagai acuan tombol, karena meskipun gambarnya menyerupai button, namun gambar tersebut tetaplah dikenali sebagai gambar bukan button, untuk itu kita mengatur pengaturan button berdasarkan koordinat.

Pengaturan button berdasarkan koordinat dengan membuat sebuah area dengan ukuran dan tempat icon button berada sehingga area tersebut akan menjalankan fungsi jika ditekan menggunakan cursor. Sebelum itu ikuti beberapa langkah berikut.

Import element swing untuk membuka file baru, yaitu dengan menambahkan

import javax.swing.*;
JFileChooser jfc;

Kemudian dideklarasikan element swing tersebut pada void setup

Inisialisasi variable isPlaying dan isLooping

boolean isPlaying;
boolean isLooping;

Tambahkan event mouse click yang membuat gambar bekerja ketika ditekan

void mouseClicked(){

Script tombol prev

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

Script tombol play / 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();
    }
  }

Script tombol stop

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

Script tombol next

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

Script tombol repeat

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

Script tombol openfile

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

Tambahkan script di bawah ini pada void draw, yang berfungsi untuk mengubah tampilan gambar play dan pause ketika musik berhenti maupun sedang diputar.

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

Memang belum semua fungsi dapat ditekan karena sampai saat ini saya juga baru sampai situ :D. Kurang lebih final codenya untuk bagian ini sebagai berikut

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

Semoga dengan menambahkan script tersebut, beberapa tombol penting dapat berfungsi dengan baik, jika sudah menemukan caranya, saya akan tambahkan pada postingan ini. Keep up to date here 😀