Belajar Adobe AIR : Membuat MP3 Player Sendiri

Udah ga asing dong dengan yang namanya Winamp, ITunes, Windows Media Player dsb. Yup, itulah beberapa software yang sering kita gunakan klo mau nyetel MP3, malah saking seringnya, sampe-sampe kerja jadi ga konsen kalo ga sambil denger musik. Nah pernah ga sih terpikir untuk bikin seperti itu ?? (klo yang bukan orang IT sih jawabannya udah pasti, NGGAK..... hehehe, sorry y).

Jujur ane juga ga kepikiran untuk bikin begituan, udah ada yg gratis n bagus kok, ngapain pusing2. Tapi....... klo yang gratis n bagus itu buatan kita sendiri, apa nggak canggih tuh namanya. Well, pelajaran kedua dari Adobe AIR ini, kita akan coba bagaimana membuat MP3 Player, belum canggih-canggih amat sih, y lumayanlah buat cari suasana baru, asal bisa Play, Pause sama Stop aj..... :D.

Adobe AIR sendiri ternyata udah support function-function untuk itu, perhatikan script berikut :

//selalu sertakan AIRAliases.js, file ini wajib ada<script type="text/javascript" src="AIRAliases.js"></script>

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<script>

//Define variable

var soundChannel1, mp3, sound, pausePosition, fold;

                                   

function change_mp3(val)

{

$('#temp_mp3').attr("value",val);

        fold = $('#target_mp3').attr("value");

if(soundChannel1) soundChannel1.stop();

mp3 = air.File.applicationDirectory.resolvePath(fold+"/"+val);

sound = new air.Sound(new air.URLRequest(mp3.url));

soundChannel1 = sound.play();

        $('#temp_play').attr("value","play");

$('#temp_pause').attr('value','');

}

function play_mp3()

{

fold = $('#target_mp3').attr("value");

if($('#temp_mp3').attr("value"))

{

if($('#temp_play').attr("value") == "")

{

var val = $('#temp_mp3').attr("value");

mp3 = air.File.applicationDirectory.resolvePath(fold+"/"+val);

sound = new air.Sound(new air.URLRequest(mp3.url));

soundChannel1 = sound.play();

$('#temp_play').attr("value","play");

}

}

}

function pause_mp3()

{

pausePosition = soundChannel1.position; 

soundChannel1.stop();

$('#playz_mp3').attr('style','display:none;');

$('#resumez_mp3').attr('style','display:block;background:#FFFFFF;');

$('#temp_pause').attr('value','pause');

}

function resume_mp3()

{

if($('#temp_pause').attr('value') == "pause")

{

fold = $('#target_mp3').attr("value");

var val = $('#temp_mp3').attr("value");

pausePosition = soundChannel1.position;

mp3 = air.File.applicationDirectory.resolvePath(fold+"/"+val);

sound = new air.Sound(new air.URLRequest(mp3.url));

soundChannel1 = sound.play(pausePosition);

$('#temp_pause').attr('value','');

}

}

function stop_mp3()

{

$('#playz_mp3').attr('style','display:block;background:#FFFFFF;');

$('#resumez_mp3').attr('style','display:none;');

soundChannel1.stop();

}

function open_folder()

{

var file = air.File.desktopDirectory;

file.addEventListener( air.Event.SELECT, function( e ) {

var list = e.target.getDirectoryListing();

var playlist="";

var name_mp3,cek_type;

for( var f = 0; f < list.length; f++ )

{

if( !list[f].isDirectory && !list[f].isHidden )

{

name_mp3 = list[f].name.substring(0,parseInt(list[f].name.length)-4);

cek_type = list[f].name.substring(parseInt(list[f].name.length)-3,list[f].name.length);

if(cek_type == "mp3")

{

if($('#temp_mp3').attr('value') == "") $('#temp_mp3').attr('value',list[f].name);

playlist += "<li><a style='display:block;background:#FFFFFF;' class='klik' alt='"+list[f].name+"'>"+name_mp3+"</a></li>";

}

}

}

$('#playlist').html(playlist);

$('#target_mp3').attr("value",e.target.nativePath);

$('.klik').click( function( e ) {

     change_mp3($(this).attr('alt'));

 });

});

file.browseForDirectory( 'Pilih Folder Musik' );

}

$( document ).ready( function() {

  $('#download-link').click( function( e ) {

open_folder();

});

});

</script>

Script HTML-nya kurang lebih seperti ini :
<div id="all_container">
  <a href="#" id="download-link" style="display:block;background:#FFFFFF;">Add Folder</a>

<input type="hidden" id="temp_mp3" value="">
<input type="hidden" id="temp_play" value="">         <input type="hidden" id="temp_stop" value="stop">


<input type="hidden" id="temp_pause" value="">
<input type="hidden" id="target_mp3" value="">

<div id="playlist_container">
<div id="tombol">
<a onClick="play_mp3()" class="tombol_play" id="playz_mp3" style="display:block;background:#FFFFFF;">Play</a>
<a onClick="resume_mp3()" class="tombol_resume" id="resumez_mp3" style="display:block;background:#FFFFFF;display:none;">Resume</a>
<a onClick="pause_mp3()" class="tombol_pause" id="pausez_mp3" style="display:block;background:#FFFFFF;">Pause</a>
<a onClick="stop_mp3()" class="tombol_stop" id="stopz_mp3" style="display:block;background:#FFFFFF;">Stop</a>
</div>

<ul id="playlist">
</ul>
</div>
</div>

Nah tinggal dikasih sentuhan CSS sesuai selera, MP3 Player ente siap digunakan. Sample lengkapnya bisa di sedot di MazhtersPlaylist.zip

Belajar Adobe AIR : Membuat Tray Icon

Alhamdulillah bisa ketemu lagi sama Adobe AIR, udah lama bgt ga ngobrol tentang ini, buat mengingat lagi langkah awal bagaimana instalasi Adobe AIR, klik di sini ya. Nah berawal dari posting ini, yuks pelan2 kita bermain-main dengan AIR, nggak sulit kok, cuma butuh 1 syarat...... jgn takut basah....... :P.

Pelajaran pertama ini adalah bagaimana membuat Tray Icon, apa itu Tray Icon ?? Mungkin sebagian besar dari kita udah sering pake YM, Gtalk atau sejenisnya. Jika diaplikasi tersebut kita klik tanda "x", akan muncul Icon kecil di kanan bawah monitor kita, nah itulah yg dinamakan Tray Icon. Fungsinya memang tidak terlalu signifikan, bisa dibilang hanya untuk menghemat space di Toolbar atau mungkin agar terlihat lebih cantik saja.

Berikut script untuk membuat Tray Icon tersebut :
//selalu sertakan AIRAliases.js, file ini wajib ada.
<script type="text/javascript" src="AIRAliases.js"></script>


//define variable win sebagai alias dari window.nativeWindow, biar penulisan setelahnya ga panjang2

var win = window.nativeWindow;


var iconLoadComplete = function(event) 
{ 
    air.NativeApplication.nativeApplication.icon.bitmaps = [event.target.content.bitmapData]; 
}

air.NativeApplication.nativeApplication.autoExit = false; 
var iconLoad = new air.Loader(); 
var iconMenu = new air.NativeMenu(); 
//perintah ini untuk menambahkan menu "Exit" pada Tray Icon yg kita buat
var exitCommand = iconMenu.addItem(new air.NativeMenuItem("Exit")); 
exitCommand.addEventListener(air.Event.SELECT,function(event){ 
        air.NativeApplication.nativeApplication.icon.bitmaps = []; 
        air.NativeApplication.nativeApplication.exit(); 
        //perintah ini untuk mengclose window atau menutup aplikasi desktop.
        win.close();
}); 


//perintah ini agar ketika Tray Icon di klik, window akan muncul, begitu jg sebaliknya.
var TrayIcon_Click = function(event){
    if (window.nativeWindow.visible) {
        window.nativeWindow.visible = false;
        win.minimize();
    } else {
        window.nativeWindow.visible = true;
        win.restore();
        //nah ini agar window yg muncul selalu berada di paling depan, berguna jika ada beberapa window.
        window.nativeWindow.orderToFront();
    }
};


if (air.NativeApplication.supportsSystemTrayIcon) { 
    air.NativeApplication.nativeApplication.autoExit = false; 
    iconLoad.contentLoaderInfo.addEventListener(air.Event.COMPLETE,iconLoadComplete); 
    //ini logo yg akan muncul di kanan bawah layar / gambar Tray Iconnya.
    iconLoad.load(new air.URLRequest("icons/logo_mazhters16x16.png")); 
    //ini text ketika mouseover di Tray Icon
    air.NativeApplication.nativeApplication.icon.tooltip = "Demo Application"; 
    air.NativeApplication.nativeApplication.icon.menu = iconMenu;
    air.NativeApplication.nativeApplication.icon.addEventListener("click", TrayIcon_Click);
}

Sangat mudah bukan ?? sebenarnya ente tinggal siapin icon/logo saja, yg lainnya bs tinggal copy paste. Ok Guys..... selamat mencoba..... tunggu modul berikutnya......