Membuat Music Player dengan Procssing Part III

Bagian ini merupakan bagian final tutorial membuat pemutar musik dengan processing. Di sini kita akan menambahkan fungsi metadata yang berguna untuk menampilkan nama artist, judul lagu dan durasi lagu yang sedang diputar. Selain itu juga akan ditambahkan fungsi tombol repeat yang  belum berfungsi dan menambahkan visualization bar mengunakan FFTLog.

Untuk tombol shuffle, next, dan previous memang tidak difungsikan, karena pada music player ini saya belum menemukan cara untuk membuat playlist. Jadi sementara saya share yang sudah ada dulu. Nanti ketika ada penambahan akan saya share lagi.

Pertama, kita inisialisai fft, fftLog dan AudioMetaData yang merupakan fungsi untuk mengambil nilai dari informasi musik yang akan dimainkan. Letakkan sebelum void setup.

FFT fft;
FFT fftLog;
AudioMetaData meta;

Kedua, deklarasikan fft dan fftLog pada void setup dengan nilai bufferSize dan sampleRate dari musik yang sedang berjalan.

  fft = new FFT(player.bufferSize(), player.sampleRate());
  fftLog = new FFT(player.bufferSize(), player.sampleRate());

Ketiga, tambahkan fft.linAverages dan fftLog.logAverages yang berguna untuk menghitung rata-rata dari spektrum dari musik yang sedang berjalan. Juga akan berfungsi untuk mengatur jarak antar spektrum dll.

  fft.linAverages(128);
  fftLog.logAverages(22, 1);

Keempat, atur penghitungan koordinat rectangle dari ujung dengan menambahkan script

  rectMode(CORNERS);

Kelima, load font yang sudah dibuat sebelumnya kita buat. Dan pastikan font tersebut sudah kita pasang seperti pada tutorial sebelumnya

  font = (loadFont("Ubuntu-20.vlw"));
  textMode(SCREEN);

Keenam, pada void draw dapatkan metadata dari musik yang sedang bermain dengan script berikut.

  meta=player.getMetaData();

Saya meletakkan pada void draw karena ketika saya coba letakkan pada void setup, metadata dari musik tidak berubah ketika kita ganti lagu yang dimainkan.

Ketujuh, tulis logaritma berikut untuk mendapatkan spektrum bar yang sesuai. Silakan diotak atik nilai-nilai yang ada agar mendapat apa yang diinginkan. Selamat mencoba memodifikasi, agar tahu sendiri fungsi masing-masing angka yang saya pilih tersebut.

  fftLog.forward(player.mix);
  int w = int(fft.specSize()/50);
  int xoffset = (width - (width/3))/2;
  for(int i = 0; i < fftLog.avgSize(); i++)
  {
    fill(111,110,255,0);
    rect(xoffset+i*w+4, 85, xoffset+i*w + w+2, 85 - fftLog.getAvg(i));
  }

Kedelapan, tambahkan text metadata yang menampilkan Judul lagu dan penyanyi pada jendela menggunakan script berikut.

  textFont(font, 20);
  text(meta.title(), (bg.width-textWidth(meta.title()))/2, 20);
  textSize(20);
  text(meta.author(), (bg.width-textWidth(meta.title()))/2, 40);

Untuk menambahkan durasi lagu yang sedang dimainkan gunakan script berikut

  int timeLeft = player.position()-player.length();
  String timeLeftStr = String.format("%02d:%02d", timeLeft/1000/60, -timeLeft/1000%60);
  text( timeLeftStr, (bg.width-textWidth(timeLeftStr))/2, 80);

Sekarang saatnya menambahkan fungsi repeat agar bisa digunakan. Inisialisasi dulu repeatOn, agar berubah warna jika ditekan. Dan isRepeat untuk cek mengatur nilai true atau false dari tombol repeat. Letakkan sebelum void setup.

PImage repeatOn;
boolean isRepeat;

Kemudian deklarasikan repeatOn dengan load gambar repeat_on

  repeatOn = loadImage("repeat_on.png");  

Selanjutnya, masukkan kode berikut yang digunakan untuk mengatur nilai isRepeat false maupun true pada void mouseClicked

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

Pada void draw tambahkan kode yang berguna untuk merubah gambar repeat ketika on dan off

  if(isRepeat){
    image(repeatOn, 210, 104);
  }else{
    image(repeat, 210, 104);
  }

Juga tambahkan fungsi ketika isRepeat = true, maka setelah lagu habis akan memutar lagu tersebut.

  if(isRepeat){
    if(player.position() >= player.length()){
      player.rewind();
      player.play();
    }
  }

Semoga 3 part tutorial tersebut bisa dipahami dengan  baik, jika kurang faham coba baca full script di bawah ini

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 repeatOn;
PImage pause;
PFont font;

Minim minim;
AudioPlayer player;
FFT fft;
FFT fftLog;
double duration;
AudioMetaData meta;
boolean isPlaying;
boolean isRepeat;

void setup(){
  size(375, 120, P2D);
  
  minim = new Minim(this);
  player = minim.loadFile("forgetjakarta.mp3");
  player.play();
  duration = player.length();
  isPlaying = true;
  isRepeat = false;
  
  fft = new FFT(player.bufferSize(), player.sampleRate());
  fft.linAverages(128);
  fftLog = new FFT(player.bufferSize(), player.sampleRate());
  fftLog.logAverages(2, 1);
  rectMode(CORNERS);
  
  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");
  repeatOn = loadImage("repeat_on.png");  
  jfc = new JFileChooser();
}

void mouseClicked(){
  if(mouseX > 15 && mouseX < 15+prev.width && mouseY > 104 && mouseY < 104+prev.width){
    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.width){
    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");
    isRepeat = !isRepeat;
  }
    
  
  if(mouseX > 120 && mouseX < 120+openfile.width && mouseY > 104 && mouseY < 104+openfile.width){
    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);
  // draw the logarithmic averages
  fftLog.forward(player.mix);
  int w = int(fft.specSize()/50);
  int xoffset = (width - (width/3))/2;
  for(int i = 0; i < fftLog.avgSize(); i++)
  {
    fill(111,110,255,0);
    rect(xoffset+i*w+4, 85, xoffset+i*w + w+2, 85 - fftLog.getAvg(i));
  }
  fill(255);
  //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);
  
  //text
  textFont(font, 20);
  text(meta.title(), (bg.width-textWidth(meta.title()))/2, 20);
  textSize(20);
  text(meta.author(), (bg.width-textWidth(meta.title()))/2, 40);
  
  int timeLeft = player.position()-player.length();
  String timeLeftStr = String.format("%02d:%02d", timeLeft/1000/60, -timeLeft/1000%60);
  text( timeLeftStr, (bg.width-textWidth(timeLeftStr))/2, 80);
  
  if(isPlaying){
    image(pause, 35, 104);
  }else{
    image(play, 35, 104);
  }

  if(isRepeat){
    image(repeatOn, 210, 104);
  }else{
    image(repeat, 210, 104);
  }
  
  if(isRepeat){
    if(player.position() >= player.length()){
      player.rewind();
      player.play();
    }
  }
}