27
BAB IV Hasil Pembahasan Aplikasi
Audio
Player
berbasis
web
ini
dibangun
menggunakan ASP.NET dan Microsoft visual developer 2010 Express. Bab ini membahas tentang hasil dan pembahasan yang meliputi implementasi. Web server yang digunakan adalah Internet Information Service (IIS) yang digunakan dalam sistem operasi Windows.
4.1
Implementasi Sistem 4.1.1
User Interface Web Audio Player
Gambar 4.1 User Interface Web Audio Player
28
Pada User interface web audio player terdapat tiga tabel utama yaitu: tabel audio player, tabel playist, tabel controler dan beberapa tabel tambahan. Pada Gambar 4.1 adalah tampilan halaman utama web audio player.
4.1.2
User Interface Upload lagu Dalam penguploadan lagu bisa dilakukan dengan 2
cara yaitu drag and drop dan pilih berkas.
Drag and Drop Upload Lagu
Gambar 4.2 Drag and Drop Upload Lagu
Pada gambar 4.2 user melakukan drag and drop. Sebelumnya user memilih lagu apa yang akan di upload pada windows explorer, kemudian mendrag dan mendrop ke dalam tempat yang telah disediakan.
29
Pilih Berkas
Gambar 4.3 Pilih Berkas
Pada gambar 4.3 user melakukan plikih berkas. Sebelumnya user memilih lagu apa yang akan di upload pada windows explorer, memasukan ke dalam tabel pilih berkas.
4.1.3
User Interface Hasil Upload
Gambar 4.4 User Interface Hasil Upload
30
Pada gambar 4.4 merupakan hasil dari upload
4.1.4
User Interface Audio Library to Playlist Dalam pemilihan lagu dari audio library to playlist
bisa dilakukan dengan 2 cara yaitu drag and drop dan add selected item.
Drag and Drop
Gambar 4.5 Drag and Drop to Playlist
Pada gambar 4.5 merupkan proses Drag and Drop audio library to playlist untuk melakukan proses pemutaran lagu.
31
Hasil Drag and Drop Audio to Playlist
Gambar 4.6 Hasil Drag and Drop Audio to Playlist
Pada gambar 4.6 merupakan hasil dari proses Drag and Drop audio library to playlist untuk melakukan proses pemutaran lagu.
Add selected item to Playlist
Klik disini Gambar 4.7 Add selcted item to playlist
32
Pada gambar 4.7 merupakan proses add selected item to playlist untuk melakukan proses pemutaran lagu.
Hasil add selected item to playlist
Gambar 4.8 Hasil add selected item
Pada gambar 4.8 merupakan hasil proses add selected item to playlist untuk melakukan proses pemutaran lagu.
4.1.5
User Interface Play Audio
Gambar 4.9 Play Audio
33
Pada gambar 4.9 merupakan gambar pada saat user melakukan proses Play Audio.
4.2
Hasil dan pembahasan
4.2.1
Upload file MP3
Sewaktu user melakukan upload, maka pada sisi server dijalankan script yang telah didefinisikan pada event onclick yang terpicu oleh penekanan tombol upload. Secara garis besar proses upload melibatkan dua aktifitas utama di sisi server. Aktifitas pertama adalah menyimpan file MP3 yang telah didefinisikan oleh pengguna. Selanjutnya file MP3 yang sudah diupload, dimasukan ke dalam daftar MP3 yang berupa file xml disertai dengan pengambilan informasi nama penyanyi dan judul album. Berikut ini merupakan kode program upload lagu.
34
1. 2. 3.
if (FileUploadAudio.HasFile) {
FileUploadAudio.SaveAs(HttpContext.Current.Server. + @"\" + MapPath("audio") FileUploadAudio.FileName); 4. LabelInformation.ForeColor = System.Drawing.Color.Green; 5. LabelInformation.Visible = true; 6. uploadFileInfo = "File has been uploaded successfully!
File name: " + 7. FileUploadAudio.PostedFile.FileName + "
" + 8. FileUploadAudio.PostedFile.ContentLength + " kb
" + "Content type: " + 9. FileUploadAudio.PostedFile.ContentType; 10. Session.Add("uploadFileInfo", uploadFileInfo); 11. } 12. else { 13. 14. LabelInformation.ForeColor = System.Drawing.Color.Red; LabelInformation.Visible = true; 15. 16. LabelInformation.Text = "You have not specified a file."; 17. } Kode Program 4.1 Source Code Upload File MP3
Bila kontrol file upload audio telah berisi file dari (pemilihan file oleh user melalui penekanan tombol choose file atau pun melalui drag and drop dari windows explorer) maka dilakukan proses penyimpanan file MP3.
35
1. string AudioTitle = uploadFileName.Substring(0, uploadFileName.Length - 4); 2. //create new instance of XmlDocument 3. XmlDocument doc = new XmlDocument(); 4. //load from file 5. doc.Load(HttpContext.Current.Server.MapPath(".") + @"\playlist\MediaLibrary.xml"); 6. //create main node 7. XmlNode node = doc.CreateNode(XmlNodeType.Element, "song", null); 8. //create the nodes first child 9. XmlAttribute attribute = doc.CreateAttribute("title"); 10. attribute.Value = AudioTitle; 11. XmlElement xNode = node as XmlElement; xNode.SetAttributeNode(attribute); 12. 13. . 14. . 15. doc.Save(HttpContext.Current.Server.MapPath(" .") + @"\playlist\MediaLibrary.xml"); Kode Program 4.2 Source Code Update File XML
Potongan kode di atas digunakan untuk menyimpan informasi tentang file mp3 yang baru saja diupload ke server. File xml yang ada di sisi server diload untuk kemudian diperbaharui isinya dengan menyisipkan sebuah node <song/> dengan attribute judul lagu, nama penyanyi, nama album, letak file mp3, dan urutan lagu saat load di audio library. Daftar lagu-lagu yang tersedia di server akan ditampilkan ke browser yang berjalan di PC client. Daftar tersebut kita peroleh dari file xml yang selalu diperbaharui setiap kali user melakukan upoad file mp3 ke server. Untuk menampilkan daftar tersebut digunakan DataList dengan sumber data berupa XmlDataSource. Sumber XmlDataSource diarahkan ke file MediaLibrary.xml.
36
1.
2. 3. 4. 9. 10. 11. Kode Program 4.3 Source Code Generate Item Audio
Setiap item hasil query ke file MediaLibrary.xml ditampung dalam sebuah dengan attribute class Player_LibraryListItem dan memiliki id unik yang dinamis sesuai Order tiap file mp3 yang ada di file xml. Div ini membungkus informasi Judul lagu di dalam tag
. Informasi lainnya (path, nama penyanyi dan judul album) tidak ditampilkan, namun tetap diperlukan untuk keperluan menambahkan audio library item ke Playlist sehingga attribut visible untuk field-field tersebut diberi nilai false.
37
4.2.2
Memuatkan file MP3 yang tersedia di Server ke
Audio Library Untuk menambahkan file MP3 ke playlist, dapat dilakukan dengan menggunakan dua cara yaitu memilih file di audio library kemudian menekan tombol add selected item to playlist atau melalui drag and drop item audio library ke area playlist. Berikut ini merupakan kode program mengambil nilai id item audio library. 1. function audioLibraryItem_Click(library_id){ 2. //split the library_id 3. splits = library_id.split("_"); 4. //cast the "library_id" as an int 5. library_id = parseInt(splits[1]); 6. selectedAudioLibraryItem_title audioLibrary_item[library_id]["title"]; 7. selectedAudioLibraryItem_url audioLibrary_item[library_id]["path"]; 8. selectedAudioLibraryItem_artist audioLibrary_item[library_id]["singer"]; 9. selectedAudioLibraryItem_album audioLibrary_item[library_id]["album"]; 10. highlightAudioLibraryItem(library_id); 11. } 12. 13. function buttonAdd_Click() { 14. storeToLocalStorage(); 15. player_Load(); 16. }
= = = =
Kode Program 4.4 Source Code Mengambil Nilai Id Item Audio Library
Untuk penambahan item playlist melalui penekanan tombol, maka proses yang terjadi adalah sebagai berikut. Pada saat item audio library di-click, informasi id dari yang di-click diperoleh. Nilai lib_id ini digunakan untuk mengumpulkan informasi yang diperlukan untuk proses penambahan item playlist. Setelah dilakukan pemilihan audio library item, tombol add selected item to playlist ditekan. Informasi yang diperoleh sebelumnya
38
disimpan ke local storage. Proses selanjutnya adalah melakukan pemuatan ulang terhadap audio player (termasuk di dalamnya memuat ulang Playlist). 1. function refreshPlaylist() { 2. //clear current Playlist 3. document.getElementById("Player_PlayList").innerHTML = ""; 4. if (window.localStorage) { 5. //Get the Playlist Items object playlistItems = 6. localStorage.getItem("playlistItems"); 7. var playlist_Items = JSON.parse(playlistItems); 8. if (playlist_Items != null) 9. if (playlist_Items.length > 0) { 10. //Update Playlist length 11. playlistLength = playlist_Items.length; 12. for (i = 0; i < playlist_Items.length; i++) { 13. var Player_PlayListItem_div = document.createElement("div"); 14. if (playlist_Items[i].selected) 15. Player_PlayListItem_div.setAttribute("class", "Player_PlayListItemSelected"); 16. else 17. Player_PlayListItem_div.setAttribute("class", "Player_PlayListItem"); 18. Player_PlayListItem_div.setAttribute("id", i); 19. Player_PlayListItem_div.setAttribute("onclick", "playlistItem_Click(this.id)"); 20. Player_PlayListItem_div.onclick = function() { playlistItem_Click(this.id); } 21. var h3_element = document.createElement('h3'); 22. var h3_text = document.createTextNode(playlist_Items[i].title); 23. . . 24. . 25. . 26. Player_PlayListItem_div.appendChild(a_path_element); 27. Player_PlayListItem_div.appendChild(a_singer_element) ;
Kode Program 4.5 Source Code Refresh File
39
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 1.
6. 7.
9.
10. //Drag and Drop Support 11. function DragItemStart(event) { var divID = event.target; 12. 13. event.dataTransfer.setData('text', divID.id); 14. } 15. function DragItemOver(event) { event.preventDefault(); 16. 17. } 18. function DragItemEnter(event) { 19. event.preventDefault(); 20. } 21. function DropItem(event) { 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. } Kode Program 4.6 source Code Drag and Drop Library to Playlist
40
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
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
41
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.
42
1. function playlistItem_Click(id) 2. { 3. //load the new audio load_track(id); 4. 5. //play the audio 6. playAudio(); 7. } 8. 9. function buttonPlay_Click() { 10. playAudio(); 11. } 12. 13. function load_track(id) { 14. if (id != loaded_index) { 15. highlightListItem(id); 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"]; audio_album 22. 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. } Kode Program 4.7 Source Code Play File MP3
=
= = =
=
=
=
=
=
43
4.2.4 Menghapus file MP3 dari playlist Item yang ada di playlist dapat dihapus salah satu atau semua. Prinsip kerja menghapus item playlist adalah sebagai berikut: 1.
Stop pemutaran file MP3 yang sedang diputar.
2.
Baca daftar item di playlist.
3.
Simpan semua item di playlist yang memiliki attribute class “Player_PlayListItem”. Dengan melakukan hal ini secara otomatis item playlist yang sedang dalam kondisi selected tidak akan disimpan ke dalam local storage dan akan dihapus dari playlist saat step berikutnya dieksekusi.
4.
Refresh playlist berdasarkan isi local storage yang baru.
44
1. buttonStop_Click(); 2. var selectedID; 3. var playlist_Items; if (window.localStorage) { 4. 5. playlistItems = localStorage.getItem("playlistItems"); 6. if (window.localStorage.length == 0) { alert("Playlist is empty"); 7. } 8. 9. else { 10. //alert("playlist length: " + playlistLength); 11. // read from current playlist like using loop, store info into Player_Load, playlist_Items 12. // store playlist_Items into local storage if item selected, selected value should be true 13. for (var i = 0; i < playlistLength; i++) { 14. if (i == 0) { 15. if (document.getElementById(i).getAttribute("class") == "Player_PlayListItem") playlist_Items = [{ "title": 16. document.getElementById(i).childNodes[0].innerHTML, "url": document.getElementById(i).childNodes[1].attributes.g etNamedItem("href").value, "artist": document.getElementById(i).childNodes[2].attributes.g etNamedItem("href").value, "album": document.getElementById(i).childNodes[3].attributes.g etNamedItem("href").value, "order": i, "selected": false}]; 17. else 18. selectedID = i; 19. } 20. else { 21. if (document.getElementById(i).getAttribute("class") == "Player_PlayListItem") 22. playlist_Items.push({ "title": document.getElementById(i).childNodes[0].innerHTML, "url": document.getElementById(i).childNodes[1].attributes.g etNamedItem("href").value, "artist": document.getElementById(i).childNodes[2].attributes.g etNamedItem("href").value, "album":
4.8 Source Code Menghapus File MP3 dari Playlist
45
4.2.5
Sync audio library to server Berhubung setiap client yang mengakses Player5 bisa
melakukan upload file MP3, maka diperlukan sebuah mekanisme untuk mensinkronisasikan audio library dengan data di server. Hal ini dapat dilakukan dengan melakukan binding ulang file MediaLibrary.xml terhadap data list audio library dengan menggunakan perintah 1.
DataListAudioLibrary.DataBind();
Kode Program 4.9 Source Code Sinkronisasi Audio Library to Server
Pengujian Sistem Metode yang digunakan dalam pengujian sitem ini adalah dengan metode Black Box, yaitu pengujian sistem yang diutamakan pada hasil atau output proses dari aplikasi yang di bangun. Dan sebagai responden sebanyak 30 mahasiswa FTI UKSW. Tabel 1. Uji coba sistem beradasarkan user friendly Hasil uji coba
1
Tampilan interface
8
13
2
2
Sangat tidak setuju 5
2
Kemudahan Penggunaan
5
15
-
4
6
3
Fasilitas drag and drop
7
12
1
3
7
4
Pesan eror dalam aplikasi
5
14
3
3
5
5
Penggunaan control player
3
17
-
7
3
5
10
3
8
4
3
18
2
3
4
No
6 7
Materi uji coba
Petunjuk memainkan player Upload data
Sangat setuju
Setuju
Tidak tahu
Tidak setuju
46
Persentase
17,14
47,14
5,23
14,28
16,19
Tabel 1 merupakan hasil pengujian sistem berdasarkan user friendly. Dan sebagai responden sebanyak 30 mahasiswa FTI UKSW, didapatkan hasil sebagai berikut: •
17,14% sangat setuju bahwa audio player ini sudah mudah digunakan.
•
47,14% setuju bahwa audio player ini sudah mudah digunakan.
•
5,23% tidak tahu bahwa audio player ini sudah mudah digunakan.
•
14,28% tdak setuju bahwa audio player ini sudah mudah digunakan.
•
16,19% sangat tidak setuju bahwa audio player ini sudah mudah digunakan.
Tabel 2 Uji coba sistem berdasarkan penggunaan memory Hasil uji coba
No
1 2
Materi uji coba
Aplikasi terasa berat Menjalankan aplikasi lain secara bersamaan Persentase
Sangat setuju
Setuju
Tidak
Tidak
tahu
setuju
Sangat tidak setuju
3
4
5
10
8
4
3
7
12
4
11,66
11,66
20
36,66
2 0
47
Tabel 2 merupakan hasil pengujian sistem berdasarkan penggunaan memori. Dan sebagai responden sebanyak 30 mahasiswa FTI UKSW. didapatkan hasil sebagai berikut: •
11,66% sangat setuju bahwa audio player ini tidak membutuhkan banyak memori.
•
11,66% setuju bahwa audio player ini tidak membutuhkan banyak memori.
•
20% tidak tahu bahwa audio player ini tidak membutuhkan banyak memori.
•
36,66% tdak setuju bahwa audio player ini tidak membutuhkan banyak memori.
•
20% sangat tidak setuju bahwa audio player ini tidak membutuhkan banyak memori. Tabel 3 Pengujian Validitas Proses Sistem
No
Proses Uji Coba
Hasil Uji Coba Valid
InValid
1
Upload lagu
√
2
Drag and drop library to playlist
√
3
Penyanyi kosong album isi
√
4
Penyanyi isi album kosong
√
5
Penyanyi kosong album kosong
√
6
Drag and drop tidak pada area
√
7
Server down
√
8
Play lagu
√
9
Stop lagu
√
10
Next lagu
√
11
Previous lagu
√
12
Pilih berkas
√
13
Sinkronisasi item
√
48
14
Clear playlist
√
15
Remove selected
√
16
Add selected item to playlist
√
Sesuai dengan tabel yaitu pengujian penggunaan oleh user, dapat disimpulkan bahwa implementasi sistem dapat berjalan dengan baik.
