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