MP3 Flash for Website

/ May 20, 2009 / 22 Comments / Komunitas Design

Banyak sekali manfaat yang bisa kita dapatkan dari software macromedia flash, salah satunya kita dapat membuat mp3 player yang bisa kita pasang di website kita sehingga website terlihat lebih cool.

Mp3 Player dalam flash ini terdiri dari 3 file, pertama playernya (kita buat dari flash), kedua file xml, ketiga beberapa file music yang berekstensi *.mp3.

Pertama kita buat Playernya:

1.Pada layer 1, kita buat dahulu model mp3 player kita, yang didalamnya terdiri dari:

  • Component list: anda dapat mengambilnya dengan menekan ctrl+F7, kemudian mengklik component user interface, nah disanalah letak component list.
  • Tombol play: pada instance name anda beri nama PlayButton
  • Tombol pause: pada instance name anda beri nama PauseButton
  • Tombol stop: pada instance name anda beri nama StopButton
  • Dynamic Text: pada instance name anda beri nama comment
  • Body Mp3 player: bentuk sesuaikan dengan selera anda

2. Pada layer 2 kita beri script berikut:

loadMusic = function(lagu){
if(lagu != undefined){
displayBar.bar._width = 0;
comment.text = ‘Meload music’;
loadLagu = true;
suara.loadSound(lagu, true);
suara.start();
} else {
comment.text = ‘silahkan memilih lagu yang ingin anda mainkan’;
}
}

// callback function saat musik durasinya habis
musicEnd = function(){
loadLagu = false;
var songNumber = PlayList.getSelectedIndex();
songNumber++;

// option : auto play all : jika masih ada lagu dibawahnya
if(songNumber <>
comment.text = ‘next ke lagu berikutnya…(‘+PlayList.getSelectedIndex()+’)’;

// setting agar seleksi lagu otomatis loncat ke lagu berikutnya di list
PlayList.setSelectedIndex(songNumber);

// mulai load lagu yg dipilih
loadMusic(loadMusic(PlayList.getSelectedItem().data));
trace(“next ke lagu berikutnya…”);

// option : rewind : jika lagu yg diputar merupakan lagu terakhir
} else {
comment.text = ‘next ke lagu berikutnya…(‘+PlayList.getSelectedIndex()+’)’;

// set ke  lagu berikutnya
PlayList.setSelectedIndex(0);

// load music kembali ke awal
loadMusic(loadMusic(PlayList.getSelectedItem().data));
trace(“Kembali ke music awal…”);
}
}

// cek durasi dan posisi lagu
displayBar.onEnterFrame = function() {
if(loadLagu){
loaded = suara.getBytesLoaded()/suara.getBytesTotal();
var soundPlayed = suara.position/suara.duration;
var soundLoaded = soundPlayed*loaded;
this.bar._width = soundLoaded*300;
if(loaded > 0){
comment.text = ‘Mulai mainkan…’;
}
suara.onSoundComplete = musicEnd;
}
}

// Play
PlayButton.onRelease = function(){
loadMusic(PlayList.getSelectedItem().data);
trace(“Mainkan music yang dipilih”);
}

// Pause
PauseButton.onRelease = function() {
if(!pause){
pause = true;
suara.stop();
trace(“Pause”);
} else {
var i = ((_root.displayBar.bar._width/300)*(suara.duration/loaded))/1000; // 1000 –> per milli detik atau 0.001 detik
suara.start(i,0);
pause = false;
trace(“Re-Play music setelah di Pause”);
}
}

// Stop
StopButton.onRelease = function() {
loadLagu = false;
pause = false;
suara.stop();
_root.displayBar.bar._width = 0;
trace(“Stop”);
};

// Load Play List dengan menggunakan load XML
loadPlayListXML = function(xmlTarget){
myXML = new XML();
myXML.ignoreWhite = true;
myXML.onLoad = function(sucess) {
if (sucess) {
onLoadXMLSuccess(myXML);
}
}
myXML.load(xmlTarget);
}
onLoadXMLSuccess = function(xmlDoc){
for (var a=0 ; a <>
judul = xmlDoc.firstChild.childNodes[a].attributes.judul;
filename = id = xmlDoc.firstChild.childNodes[a].childNodes[0].firstChild.nodeValue;
PlayList.addItem(judul,filename);
}
jumlahLagu = PlayList.getLength();
}
stop();

// initial
suara = new Sound();
pause = false;
totalLagu = null;
jumlahLagu = false;
loadPlayListXML(“playlist.xml”);

3. Membuat Playlist.xml

<?xml version=’1.0′ encoding=’utf-8′?>
<playlist>
<judul=”Indonesia Raya”>
<filename=”indonesia-raya.mp3″ />
</judul>
<judul=”Komunitas Music”>
<filename=”komunitaskami.mp3″ />
</judul>
</playlist>