Buat Aplikasi MP3 Player Sederhana dengan Flash+AS2

15Apr10

Memanfaatkan kemampuan Flash yang dapat memainkan file MP3 dengan cara membuat Sound object (di AS2, favoritku ;p), saya pernah iseng2 membuat versi cupu dari aplikasi MP3 player.. BTW, tau Winamp kan? nah aplikasi semacam ini yang saya istilahkan sebagai MP3 player (versi kerennya sih :D ), yah.. meskipun yang pernah saya buat tersebut hasilnya masih berupa fitur-fitur dasar sederhana: load file-file MP3, next track, previous track, tampilan informasi MP3nya, dan tampilan playlist (supaya user bisa memilih file MP3 yang ingin dimainkan dengan mengkliknya di playlist).

Cara buatnya, Flash dibuat memanjang ke bawah (biar rada mirip Winamp), simpan 3 buah movieclip yang sama (dimana di dalamnya terdapat sebuah dynamic text dengan instance name “teks“) namun diberikan instance name berbeda yaitu “browse_btn“, “kanan_btn“, dan “kiri_btn” (ketiganya akan berperan sebagai tombol untuk load files, play next track, dan play previous track). Sebuah dynamic text dengan instance name “tulisan_txt” (yang akan menampilkan nama artist, judul, dan ukuran waktu MP3 berjalan dimana informasi ini diambil dari ID3 tags MP3nya). Di bawahnya lagi sebagai tampilan playlist digunakan sebuah List Component dengan instance name “cmp_playlist“. Menyusul kemudian, baris ActionScriptnya disimpan di frame:

import flash.net.FileReferenceList;

var playlist:Array = new Array(0);
var musik:Sound = new Sound();
var angka:Number = new Number(0);
var fileRefList:FileReferenceList = new FileReferenceList();
var listenerFileRefList:Object = new Object();
var listHandler:Object = new Object();

fscommand("showmenu", false);
kanan_btn.onPress = kanan;
kiri_btn.onPress = kiri;
browse_btn.onPress = browseFile;
browse_btn.teks.text = "load";
kiri_btn.teks.text = "prev";
kanan_btn.teks.text = "next";
fileRefList.addListener(listenerFileRefList);
cmp_playlist.addEventListener("change", listHandler);
cmp_playlist.setStyle("fontFamily", "corbel");
cmp_playlist.setStyle("fontSize", "12");
tulisan_txt.text = "load file MP3 terlebih dulu..\n (maaf, di versi cupu ini, file MP3nya mesti sefolder sama aplikasinya)";

listHandler.change = function(evt:Object){
    if(angka != evt.target.selectedItem.data){
		angka = evt.target.selectedItem.data;
		loadMusik();
	}
}

musik.onSoundComplete = function(){
	kanan();
}

musik.onLoad = function(success:Boolean){
	if (success){
		musik.start();
	}
	else{
		tulisan_txt = "salah load file";
	}
}

listenerFileRefList.onSelect = function(file:FileReferenceList){
	for(var i = 0; i < file.fileList.length; i++){
		var filePilihan = file.fileList[i].name;
		if(filePilihan.substr(-3, 3) == "mp3"){
			cmp_playlist.addItem({label:filePilihan, data:playlist.length});
			playlist.push(filePilihan);
		}
	}
	loadMusik();
}

function browseFile(){
	fileRefList.browse([{description:"Ingat: file MP3 sefolder saja! (maklum versi cupu)", extension:"*.mp3"}]);
}

function loadMusik(){
	musik.loadSound(playlist[angka], true);
}

function kanan(){
	if(playlist.length < 1){
		tulisan_txt.text = "load filenya dulu woi..\n(tombolnya di bawah playlist)";
	}
	else{
		angka += 1;
		if(angka >= playlist.length){
			angka = 0;
		}
		loadMusik();
	}
}

function kiri(){
	if(playlist.length < 1){
		tulisan_txt.text = "load filenya dulu woi..\n(tombolnya di bawah playlist)";
	}
	else{
		angka -= 1;
		if(angka <= 0)	{
			angka = playlist.length - 1;
		}
		loadMusik();
	}
}

this.onEnterFrame=function(){
	var posisi:String = musik.position.toString();
	var durasi:String = musik.duration.toString();
	var artist:String = musik.id3.artist.toString();
	var judul:String = musik.id3.songname.toString();
	var menitPlaying:String = Math.floor(posisi/60000) + ":" + Math.round((posisi/1000)%60);
	var menitTotal:String = Math.floor(durasi/60000) + ":" + Math.round((durasi/1000)%60);

	if(playlist.length >= 1){
		tulisan_txt.text = artist + " - " + judul + "\n" + menitPlaying + " / " + menitTotal;
	}
}

Preview

Mohon maaf kalau kodenya terlihat tidak efisien, nampak buggy, dan sulit dibaca algoritmanya acak-acakan :D yang penting fungsional dulu lah ya.. 8) Tekan Ctrl+Enter untuk melihat preview movie.

Namun ada keterbatasan yang cukup mengganggu dari aplikasi yang saya buat ini, yaitu:

Cuman bisa menjalankan file MP3 yang sefolder dengan SWF-nya, klo gak: undefined -__-’

Zzzzz.. Mungkin saya salah cara ngakses file dari objek FileReferenceList? atau sistem sandbox objek Sound yang tidak memperbolehkan loadSound diluar direktori?.. Anybody knows how can I play MP3 files that’s stored anywhere, so it could be like a real MP3 player? please share… Any improvement welcome..

Bagi yang berminat untuk melihat contoh aplikasinya (.exe) sila unduh di http://www.box.net/shared/30010rjlmf

***

Referensi terkait:

  • http://flash-reference.icod.de/flash/net/FileReferenceList.html
  • http://flash-reference.icod.de/Sound.html
  • Tips Trik Flash, Tabloid PC-Mild Edisi 6/2010
  • About these ads


    29 Responses to “Buat Aplikasi MP3 Player Sederhana dengan Flash+AS2”

    1. 1 dio

      kk aku boleh tolong ga,,aku minta ebook yg judul na pustena-modul training membuat cd interaktif.doc …aku cari ga ktmu2 kk….aku perlu bgt kk buat referansi penulisan…tolong y kk,,mksh atas bntuannya..

    2. @dio
      beberapa ebook ttg Flash saya upload di http://F4154LMAN-design-ebook.blogspot.com sila cari disana..

    3. kak cara nulis sintaks di wordpress supaya bisa di copy paste trus ga kena filter keamanan wordpress kaya di atas gmana kak?

      thanks

    4. @Oby Ramadhani
      filter keamanan yg mana btw? kalau maksudnya biar tag > atau < nggak hilang, di TinyMCE (WYSIWYG) copy-paste kodenya di bagian tab "View" aja..

    5. 5 Hamlen

      kk aku boleh tolong ga,,aku minta ebook yg judul na pustena-modul training membuat cd interaktif.doc …aku cari ga ktmu2 kk….aku perlu bgt kk buat referansi penulisan…tolong y kk,,mksh atas bntuannya..
      +1

    6. 6 Ulum

      nice post bro..

    7. 7 tyoo

      bro, boleh mnta file .fla nya ngga??

    8. 8 rifff

      bro, boleh mnta file .fla nya ngga??v

    9. 9 syarif

      yg mau file .fla bsa download di
      http://downloads.ziddu.com/downloadfile/11719989/MP3PLAYERFLASH.rar.html

    10. Nih, q mau tanya…
      Jika ingin membuat animasi flash yang bisa kita atur jalannya animasi gmn??
      Misal, kita ingin mengatur kecep.animasi dengan memasukkan teks/angka dalam sebuah dinamic text, sehingga animasi tsb bisa brjalan sesuai dengan kecep.yang kita masukkan.
      Mohon bantuannya.
      Trims

    11. 11 cecep

      komputer

    12. ikut mencoba bikin mp3 player ah…. makasih scriptnya.

    13. 13 agus

      bisa kirimi video tutorial’y gx utk buat aplikasi yang kaya gini

    14. saya ingin tujukan kepada kawan-kawan

    15. 15 menik

      mas cara nulis arab di mac flash MX gmn?

    16. 16 fahm1

      kalo bisa tambahin button untuk save playlist. kalo ada mp3 yang fersi baru up date ya…..

    17. flash+as2 itu semacam bahasa pemprogramannya ya???

    18. 18 vita

      asyik banget nih, perlu dicobain.
      makasih kak tutornya :-)

    19. 19 nandar

      bang saya kan baru belajar buat aplikasi. nah yang saya mau tanyakan bagaimana caranya biar aplikasi itu kalau di instal langsung jalan saat komputer di nyalakan?.. thankx

    20. 20 fery

      kk saya newbie flash saya mo tanya klo winampnya tanpa diload langsug ada dilistnya gmn caranya???

    21. Mantap Bro..

    22. thanks gan info nya membantu bangeth,,gan saya udah udah berhasil membuat seperti aplikasi di atas cuman say ingin menambahkan tombol play/pause sama stop nya gan,, cara nya gmna tuh bisa bantu gak gan?? makasih sebelumnya

    23. 23 pelangi

      aku udah coba bikin kayak gini,, tapi pas di test movienya muncul error
      The class or interface ‘flash.net.FileReferenceList’ could not be loaded.
      maksudnya apa kak,, tolong jelasin dong??

    24. 24 pelangi

      aku udah coba buat, tapi pas di test movie ada pesen error ”The class or interface ‘flash.net.FileReferenceList’ could not be loaded.”
      bisa tolong jelasin gak??

    25. 25 bintang

      gimana c caranya bikin media pembelajaran denga adobe flash

    26. 26 deddy

      gan gmn file mentahannya

    27. 27 raldes

      gan ko ane coba di playlistnya ga muncul judul lagu sama durasi lagu mohon pencerahannya

    28. 28 agus gerang

      bisa ngak secara detail maklum saya masih orang awam……,


    1. 1 Membuat Media Interaktif dengan Flash « {F4154LMAN}

    Tinggalkan Balasan

    Isikan data di bawah atau klik salah satu ikon untuk log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Logout / Ubah )

    Twitter picture

    You are commenting using your Twitter account. Logout / Ubah )

    Facebook photo

    You are commenting using your Facebook account. Logout / Ubah )

    Google+ photo

    You are commenting using your Google+ account. Logout / Ubah )

    Connecting to %s


    Ikuti

    Get every new post delivered to your Inbox.

    Bergabunglah dengan 176 pengikut lainnya.

    %d bloggers like this: