Institutional Repository | Satya Wacana Christian University: Pemodelan Audio Player Berbasis Web dengan Menggunakan HTML 5 T1 672004059 BAB IV

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

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.

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

Pada gambar 4.5 merupkan proses Drag and Drop audio library to playlist untuk melakukan proses pemutaran lagu.

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

Gambar 4.7 Add selcted item to playlist Klik disini

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

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.

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

3.

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! <br/> File name: " +

7.

FileUploadAudio.PostedFile.FileName + "<br>" +

8.

FileUploadAudio.PostedFile.ContentLength + "

kb<br>" + "Content type: " +

9.

FileUploadAudio.PostedFile.ContentType; 10. Session.Add("uploadFileInfo",

uploadFileInfo); 11. }

12. else

13. {

14. LabelInformation.ForeColor =

System.Drawing.Color.Red;

15. LabelInformation.Visible = true;

16. LabelInformation.Text = "You have not

specified a file."; 17. }

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

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;

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") %>"

visible="false"></a> 9. </div> 10. </ItemTemplate> 11. </asp:DataList>

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

3.

document.getElementById("Player_PlayList").innerHTML = "";

4. if (window.localStorage) {

5. //Get the Playlist Items object

6. playlistItems =

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

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

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();

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

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_Click(id)

2. {

3. //load the new audio

4. load_track(id);

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"];

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

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.

4.8 Source Code Menghapus File MP3 dari Playlist 1. buttonStop_Click();

2. var selectedID; 3. var playlist_Items;

4. if (window.localStorage) {

5. playlistItems =

localStorage.getItem("playlistItems");

6. if (window.localStorage.length == 0) { 7. alert("Playlist is empty");

8. } 9. else {

10. //alert("playlist length: " + playlistLength);

11. // read from current playlist like

Player_Load, using loop, store info into

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

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}];

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

Sangat tidak setuju

1 Tampilan interface 8 13 2 2 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

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.

• 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 Materi uji coba Sangat

setuju Setuju

Tidak tahu

Tidak setuju

Sangat tidak setuju 1 Aplikasi terasa berat 3 4 5 10 8 2 Menjalankan aplikasi

lain secara bersamaan 4 3 7 12 4 Persentase 11,66 11,66 20 36,66 2

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 √

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.

4.2.4 Menghapus file MP3 dari playlist

Item yang ada di playlist dapat dihapus salah satu atau semua. Prinsip kerja menghapus itemplaylist 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

4.8 Source Code Menghapus File MP3 dari Playlist

1. buttonStop_Click(); 2. var selectedID; 3. var playlist_Items;

4. if (window.localStorage) {

5. playlistItems =

localStorage.getItem("playlistItems");

6. if (window.localStorage.length == 0) { 7. alert("Playlist is empty");

8. } 9. else {

10. //alert("playlist length: " + playlistLength);

11. // read from current playlist like

Player_Load, using loop, store info into

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

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}];

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

Sangat tidak setuju

1 Tampilan interface 8 13 2 2 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

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. Dansebagai responden sebanyak 30 mahasiswa FTI UKSW,

didapatkan hasil sebagai berikut:

• 17,14% sangat setuju bahwa audioplayer 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 Materi uji coba Sangat

setuju Setuju

Tidak tahu

Tidak setuju

Sangat tidak setuju

1 Aplikasi terasa berat 3 4 5 10 8

2 Menjalankan aplikasi

lain secara bersamaan 4 3 7 12 4

Persentase 11,66 11,66 20 36,66 2

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 audioplayer ini tidak membutuhkan banyak memori.

• 20% tidak tahu bahwa audioplayer 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 √

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.