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
+ kbbr
+ 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.Substring0, 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.SetAttributeNodeattribute;
13. .
14. .
15. doc.Save
HttpContext .Current.Server.MapPath
. +
\playlist\MediaLibrary.xml ;
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 =playlistMediaLibrary.xml
XPath =AudioLibrarygenre[name=Gospel]song
runat =server
2. asp
: DataList
id =DataListAudioLibrary
DataSourceId =AudioLibrarySource
runat =server
3. ItemTemplate
4. div
class =Player_LibraryListItem
id =
audioLibraryItem_ + XPathorder onclick
=audioLibraryItem_Clickthis.id draggable
=true ondragstart
=DragItemStartevent 5.
h3 XPath
title h3
6. a
href =
XPathpath visible
=false a
7. a
href =
XPathsinger visible
=false a
8. a
href =
XPathalbum visible
=false a
9. div
10. ItemTemplate
11. asp
: DataList
4.2.2 Memuatkan file MP3 yang tersedia di Server ke Audio Library
Kategori