Adapun pemuatan ulang Playlist terdiri dari dua proses yaitu: membaca isi dari local storage dan kemudian membuat element
HTML yang dibutuhkan berdasarkan entry yang ada di local storage
Kode Program 4.6 source Code Drag and Drop Library to Playlist
1. div
class =Player_LibraryListItem
id =
audioLibraryItem_ +
XPathorder onclick
=audioLibraryItem_Clickthis.id draggable
=true ondragstart
=DragItemStartevent 2.
h3 XPath
title h3
3. a
href =
XPathpath visible
=false a
4. a
href =
XPathsinger visible
=false a
5. a
href =
XPathalbum visible
=false a
6. div
7. div
id =Player_PlayList
ondragover =DragItemOverevent
ondragenter =DragItemEnterevent
8. ondrop
=DropItemevent 9.
div 10.
Drag and Drop Support 11.
function DragItemStartevent {
12. var
divID = event.target; 13.
event.dataTransfer.setData text
, divID.id;
14. }
15. function
DragItemOverevent { 16.
event.preventDefault; 17.
} 18.
function DragItemEnterevent {
19. event.preventDefault;
20. }
21. function
DropItemevent { 22.
if event.dataTransfer {
23. var
textData =
event.dataTransfer.getData text
; 24.
split the lib_id 25.
splits = textData.split _
; 26.
cast the lib_id as an int 27.
. 28.
. 29.
. .
30. player_Load;
31. }
Untuk mengaktifkan fitur penambahan item playlist dengan menggunakan drag and drop, dilakukan beberapa langkah berikut
ini : 1.
Mendefinisikan AudioLibrary item sebagai item sumber yang dapat di-drag. Hal ini dilakukan dengan memberi
nilai True attribute “Draggable” pada div dengan class “Player_LibraryListItem”.
2. Mendefinisikan event handler di area Playlist untuk
menangani proses drop. Event handler yang perlu didefinisikan
adalah ondragstart
pada div
Player_LibraryListItem yang bertindak sebagai source sumber, ondragover, ondragenter, dan ondrop pada div
Player_PlayList sebagai destination tujuan
Mendefinisikan function di Javascript yang akan dipanggil sewaktu event drag ataupun drop terjadi. Event ondragstart terpicu
ketika menekan tombol kiri mouse pada item Audio Library kemudian sambil menahan tombol kiri menggerakkan mouse ke area
lain nya. Event ondragover terpicu selama pergerakan mouse dalam kondisi tombol kiri ditahan. Event ondragenter terpicu pada saat
kursor mouse yang dalam kondisi tombol kiri tertahan memasuki
area drop.
4.2.3 Memainkan file MP3 yang ada di playlist Untuk memainkan file mp3 sesuai yang tertera di playlist
lakukan klik pada item playlist atau dengan melakukan click pada tombol play. Proses untuk memutar file MP3 menggunakan Audio
engine yang disediakan oleh HTML5 adalah mendefinisikan path
sumber file MP3 yang dikehendaki ke Audio Engine dengan
menggunakan perintah audio_Player.src = audio_path. Sesudah itu file audio
yang didefinisikan di audio_path dimuatkan ke Audio Engine
HTML5 dengan menggunakan perintah audio_Player.load. Begitu Audio Engine sudah dalam kondisi termuati file, perintah
audio_Player.play akan melakukan playback terhadap file MP3 yang dikehendaki. Proses streaming file MP3 ditangani oleh Audio
Engine HTML5.
Kode Program 4.7 Source Code Play File MP3
1. function
playlistItem_Clickid 2.
{ 3.
load the new audio 4.
load_trackid; 5.
play the audio 6.
playAudio; 7.
} 8.
9. function
buttonPlay_Click { 10.
playAudio; 11.
} 12.
13. function
load_trackid { 14.
if id = loaded_index {
15. highlightListItemid;
16. loaded_index = id;
17. audio_path
= playlist_item[id][
path ];
18. audio_Player.src = audio_path;
19. audio_Player.load;
20. audio_title
= playlist_item[id][
title ];
21. audio_singer
= playlist_item[id][
singer ];
22. audio_album
= playlist_item[id][
album ];
23. document.getElementById
Audio_Title .innerHTML =
audio_title; 24.
document.getElementById Audio_Singer
.innerHTML = Singer:
+ audio_singer; 25.
document.getElementById Audio_Album
.innerHTML = - Album:
+ audio_album; 26.
} 27.
}
28.
29. function
playAudio { 30.
audio_Player.play; 31.
document.getElementById play
.style.display =
none ;
32. document.getElementById
pause .style.display
= block
; 33.
}
4.2.4 Menghapus file MP3 dari playlist Item
