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>
<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
