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
jfc = new JFileChooser();
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 😀
