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
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
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
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
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
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
Pada gambar 4.9 merupakan gambar pada saat user melakukan proses Play Audio.
4.2 Hasil dan pembahasan
4.2.1 Upload file MP3
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.
1. if (FileUploadAudio.HasFile)
2. { successfully! <br/> File name: " +
7.
FileUploadAudio.PostedFile.FileName + "<br>" +
8.
FileUploadAudio.PostedFile.ContentLength + "
kb<br>" + "Content type: " +
9.
FileUploadAudio.PostedFile.ContentType; 10. Session.Add("uploadFileInfo",
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.
1. string AudioTitle = uploadFileName.Substring(0, uploadFileName.Length - 4);
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;
12. xNode.SetAttributeNode(attribute);
13. .
14. .
15. doc.Save(HttpContext.Current.Server.MapPath("
Kode Program 4.3 Source Code Generate Item Audio
Setiap item hasil query ke file MediaLibrary.xml ditampung dalam sebuah <div> 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 <h3>. 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.
1. <asp:XmlDataSource id="AudioLibrarySource"
DataFile="playlist/MediaLibrary.xml"
XPath="AudioLibrary/genre[@name='Gospel']/song"
runat="server"/>
2. <asp:DataList id="DataListAudioLibrary"
DataSourceId="AudioLibrarySource" runat="server"> 3. <ItemTemplate>
4. <div class="Player_LibraryListItem"
id="<%# "audioLibraryItem_" + XPath("@order") %>"
onclick="audioLibraryItem_Click(this.id)"
draggable="true"
ondragstart="DragItemStart(event)">
5. <h3><%# XPath("@title") %></h3>
6. <a href="<%# XPath("@path") %>"
visible="false"></a>
7. <a href="<%# XPath("@singer") %>"
visible="false"></a>
8. <a href="<%# XPath("@album") %>"
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.
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 <div> 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
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();
disimpan ke local storage. Proses selanjutnya adalah melakukan pemuatan ulang terhadap audio player (termasuk di dalamnya memuat ulang Playlist).
Kode Program 4.5 Source Code Refresh File 1. function refreshPlaylist() {
2. //clear current Playlist
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');
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_" + XPath("@order") %>"
onclick="audioLibraryItem_Click(this.id)"
draggable="true"
ondragstart="DragItemStart(event)">
2. <h3><%# XPath("@title") %></h3>
3. <a href="<%# XPath("@path") %>"
visible="false"></a>
4. <a href="<%# XPath("@singer") %>"
visible="false"></a>
5. <a href="<%# XPath("@album") %>"
visible="false"></a>
6. </div>
7. <div id="Player_PlayList"
ondragover="DragItemOver(event)"
ondragenter="DragItemEnter(event)"
8. ondrop="DropItem(event)"> 9. </div>
10. //Drag and Drop Support
11. function DragItemStart(event) {
12. var divID = event.target;
13. event.dataTransfer.setData('text',
divID.id);
14. }
15. function DragItemOver(event) {
16. event.preventDefault();
17. }
18. function DragItemEnter(event) {
19. event.preventDefault();
20. }
21. function DropItem(event) {
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_PlayListsebagai 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
Kode Program 4.7 Source Code Play File MP3 1. function playlistItem_Click(id)
2. {
9. function buttonPlay_Click() {
10. playAudio();
11. }
12.
13. function load_track(id) {
14. if (id != loaded_index) {
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";
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.8 Source Code Menghapus File MP3 dari Playlist
(document.getElementById(i).getAttribute("class") ==
"Player_PlayListItem")
16. playlist_Items = [{ "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": document.getElementById(i).childNodes[3].attributes.g etNamedItem("href").value, "order": i, "selected":
false}];
(document.getElementById(i).getAttribute("class") ==
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
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
No Materi uji coba Sangat
setuju Setuju Tidak tahu
Tidak
6 Petunjuk memainkan
player 5 10 3 8 4
7 Upload data 3 18 2 3 4
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.
Tabel 2 Uji coba sistem berdasarkan penggunaan memory
Hasil
2 Menjalankan aplikasi
lain secara bersamaan 4 3 7 12 4
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
5 Penyanyi kosong album kosong √
6 Drag and drop tidak pada area √
14 Clear playlist √
15 Remove selected √
16 Add selected item to playlist √
