ONLINE ON DEMAND DAN LIVE STREAMING RADIO DENGAN REAL TIME

STREAMING PROTOCOL

oleh

Cerian Yuwono

NIM : 612007005

Skripsi

Untuk melengkapi salah satu syarat memperoleh

Gelar Sarjana Teknik

Program Studi Teknik Komputer

Fakultas Teknik Elektronika dan Komputer

Universitas Kristen Satya Wacana

Salatiga

Juli 2013

i

i

i

INTISARI

On demand streaming radio merupakan salah satu upaya untuk menghasilkan

kemudahan dalam penyebaran radio, serta dapat menanggulangi masalah pembajakan.

Aplikasi ini dibangun berbasis website HTLM5 dan PHP yang dilengkapi dengan

pemutar audio dengan format mp3, dan menggunakan bahasa pemprograman Java

dengan Java media Framework. Dalam aplikasi On demand radio streaming terdapat

dua kualitas codec audio yang biasa digunakan dalam standart telekomunikasi, yaitu

GSM dan G711.

Aplikasi website dilengkapi dengan fitur pemutaran data audio, berformat mp3

dengan dua kualitas yang berbeda, yaitu kualitas high dengan fitur stereo, dan low

dengan fitur mono. Juga dilengkapi aplikasi on demand streaming radio dengan dua

buah server yang berbeda. Server 1 menggunakan codec GSM dan server 2

menggunakan codec G.711.

Pengujian telah dilakukan dan diuji oleh 16 client sekaligus yang terhubung

dengan jaringan lokal, dari hasil pengujian didapat persentase keberhasilan sebesar

100%, dimana aplikasi dapat diakses oleh platform windows XP, windows 7 dan

windows 8, dengan berbagai macam web browser yang telah di-dukung java applet

plugin. Dari hasil pengujian juga didapatkan delay di-bawah 1 menit, sehingga user

dapat menikmati radio secara real-time.

ii

ABSTRACT

On demand streaming radio is an efford to ease the radio deployment, as well as

to reduce the piracy problem. This application was built in web form based with

HTML5 and PHP that is equipped with mp3 audio player, and using Java programming

language with Java Media Framework. In the streaming radio application, there are two

quality of audio codec that commonly used in the telecommunication standarts, namely

GSM and G711 audio codec.

Website application is equipped with a mp3 data playback audio feature, with two

different quality, which are High quality with stereo, and Low quality with mono. This

application also included on demand streaming radio with two different servers. Server

1 using the GSM codec, and server 2 using G711 codec.

Test has been done and tested by 16 clients at the same time, as long as they are

connected to the local network, from the test resulted that the application has 100%

success rate, where the application can be accessed by windows XP, windows 7 and

windows 8 platform, with all website browser that has been supported with java applet.

From the test results are obtained that this application have less than 1 minute delay, so

users can enjoy this live and on demand radio in real-time.

iii

KATA PENGANTAR

Puji syukur saya panjatkan kepada Tuhan Yesus Kristus karena berkat dan rahmat

– Nya selama ini, sehingga saya mampu menyelesaikan skripsi sebagai tugas akhir

perkuliahan ini. Tidak lupa pula saya ucapkan terima kasih kepada bapak Hartanto W,

M.T selaku pembimbing pertama dan bapak Saptadi Nugroho, M.Sc selaku

pembimbing kedua yang telah menyediakan waktu dan membantu saya dalam

mengerjakan skripsi hingga selesai.

Terselesaikannya skripsi ini juga tak lepas dari dukungan baik dalam dukungan

doa maupun dukungan keuangan dan kasih sayang dari keluarga saya, saya ucapkan

terimakasih kepada kedua orang tua saya papa Yuwono Suroso dan mama Ratna

Indrawati yang telah mendukung dan membiayai kuliah selama ini. Dan juga tak lupa

pula saya ucapkan terima kasih kepada keluarga kakak saya Arief Yuwono M.Kom dan

Bevilia Indrati Yuwono M.Arch yang telah membantu dan memberi semangat untuk

menyelesaikan skripsi ini.

Selain itu, saya ucapkan terima kasih kepada Maharani Widjojo atas bantuan

semangat, kasih sayang, serta dukungan yang dia berikan selama ini yang menjadi

motivasi saya dalam menyelesaikan skripsi.

Terima kasih pula atas dukungan dan semangat dari teman-teman Fakultas

Teknik Elektro dan Elektronika, teman – teman kos Diponegoro 73, dan teman – teman

lain yang tidak saya sebutkan satu per satu, atas inspirasi untuk terus belajar, berjuang

dan berusaha.

Apresiasi juga saya berikan kepada seluruh dosen dan para laboran (FTEK)

Fakultas Teknik Elektronika dan Komputer yang telah membantu, mengajar, dan

iv

membimbing selama perkuliahan dan telah memberikan ilmu yang bermanfaat sebagai

dasar pembuatan skripsi ini.

Sebagai penutup, saya selaku sebagai penulis berharap tugas akhir ini dapat

memberi manfaat dan menambah pengetahuan bagi para pembaca. Karena kekurangan

dan keterbatasan yang saya miliki menjadikan skripsi ini jauh dari sempurna. Maka dari

itu kritik dan saran yang membangun akan saya terima dengan berbesar hati.

Salatiga, Juni 2013

Penulis

Cerian Yuwono

v

DAFTAR ISI

HALAMAN

INTISARI i

ABSTRACT ii

KATA PENGANTAR iii

DAFTAR ISI v

DAFTAR GAMBAR vii

DAFTAR TABEL x

DAFTAR KODE xi

DAFTAR SINGKATAN xii

BAB I PENDAHULUAN 1

1. 1. Tujuan 1

1. 2. Latar Belakang 1

1. 3. Gambaran Sistem 3

1. 4. Batasan Masalah 4

1. 5. Perincian Tugas 4

1. 6. Sistematika Penulisan 5

BAB II DASAR TEORI 6

2. 1. Streaming 6

2. 1. 1. Arsitektur Streaming 7

2. 1. 2. Streaming dan Download 8

2. 1. 3. On demand streaming 8

2. 1. 4. Parameter dalam audio streaming 9

2. 1. 5. Delay 9

2. 1. 6. Jitter 10

2. 1. 7. Packet Loss 11

2. 2. Audio Encoding 11

2. 2. 1. Audio Capture 12

2. 2. 2. G.711 µlaw 13

2. 2. 3. GSM 13

2. 3. Internet dan Website 14

2. 3. 1. HTTP 15

2. 3. 2. HTML5 17

vi

2. 3. 3. PHP 17

2. 3. 4. WAMP Server 18

2. 3. 5. MYSQL 18

2. 4. Protocol 19

2. 4. 1. TCP/IP 19

2. 4. 2. UDP 20

2. 4. 3. RealTime Transport Protocol (RTP) 21

2. 4. 4. RealTime Control Protocol (RTCP) 23

2. 4. 5. RealTime Streaming Protocol (RTSP) 23

2. 5. Java Media Framework 24

2. 6. Java Applet 27

2. 7. Wireshark 28

BAB III PERANCANGAN SISTEM 30

3. 1. Gambaran Sistem 30

3. 1. 1. Aplikasi Client Website Streaming 30

3. 1. 2. Aplikasi Administrator Komputer Server 32

3. 2. Desain Arsitektur Sistem 34

3. 3. Perancangan Database 35

3. 3. 1. Database Server 36

3. 4. Perancangan Aplikasi Website on demand Streaming Radio 36

3. 4. 1. Aplikasi Administrator Komputer Server 36

3. 4. 1. 1. Capturing Audio device 36

3. 4. 1. 2. Capturing Audio 37

3. 4. 1. 3. Encoding masukan Audio 38

3. 4. 1. 4. Transmisi data Audio 38

3. 4. 1. 5. Website 39

3. 4. 1. 6. Webserver 39

3. 4. 1. 7. Database Administrator 39

3. 4. 2. Aplikasi Website Streaming Radio 40

3. 4. 2. 1. User Interface 40

3. 4. 2. 2. HTML5 Player 43

3. 4. 2. 3. Applet Player 43

BAB IV PENGUJIAN DAN ANALISIS 45

vii

4. 1. Spesifikasi Alat 45

4. 2. Prosedur Pengujian 46

4. 2. 1. Prosedur Pengujian Kompatibilitas Aplikasi 47

4. 2. 2. Prosedur Pengujian berdasarkan skenario yang telah dibuat

49

4. 3. Hasil Pengujian 52

4. 3. 1. Hasil Pengujian Kompatibilitas 52

4. 3. 2. Hasil Pengujian berdasarkan skenario yang telah dibuat 55

BAB V KESIMPULAN DAN SARAN 68

5. 1. Kesimpulan 68

5. 2. Saran 68

DAFTAR PUSTAKA 69

viii

DAFTAR GAMBAR

HALAMAN

Gambar 1.1. Arsitektur Sistem 3

Gambar 2.1. Arsitektur Streaming 7

Gambar 2.2. Perbedaan Download dan Streaming 8

Gambar 2.3. Delay yang terjadi dalam pengiriman data 10

Gambar 2.4. Proses terjadinya Jitter 11

Gambar 2.5. Proses Audio Encoding 12

Gambar 2.6. Proses Capture Audio 13

Gambar 2.7. Lapisan pada TCP/IP 19

Gambar 2.8. Arsitektur RTP 22

Gambar 2.9. Arsitektur JMF 24

Gambar 2.10. State Player 25

Gambar 2.11. RTP Transmitter dengan JMF 27

Gambar 2.12. Wireshark RTP Stream Analysis 29

Gambar 3.1. Use Case diagram Pengguna 30

Gambar 3.2. Diagram alir Client website streaming 32

Gambar 3.3. Use Case diagram Administrator 33

Gambar 3.4. Diagram Alir Aplikasi Administrator Komputer Server 34

Gambar 3.5. Arsitektur website streaming radio 35

Gambar 3.6. Diagram Alir Aplikasi Streaming Data Audio 42

Gambar 4.1. Player HTML5 pada web browser Google Chrome 53

Gambar 4.2. Player HTML5 pada web browser Mozila Firefox 54

Gambar 4.3. Player HTML5 pada web browser Internet Explorer 54

Gambar 4.4. Applet player on demand streaming radio 55

Gambar 4.5. Tampilan utama halaman Administrator 55

Gambar 4.6. Tampilan Form penambahan informasi data Audio kedalam Database

56

Gambar 4.7. Notifikasi penambahan data berhasil 56

Gambar 4.8. Tampilan Form pengubahan informasi data dalam Database 57

Gambar 4.9. Notifikasi pengubahan informasi data berhasil 57

Gambar 4.10. Notifikasi data berhasil dihapus dari Database 57

ix

Gambar 4.11. Tampilan halaman Home pada Aplikasi Website On demand Streaming

radio 58

Gambar 4.12. Halaman panduan ketika Pengguna menekan link “DOWNLOAD JRE

PLUGIN” 59

Gambar 4.13. Tampilah Halaman “Music” 60

Gambar 4.14. Notifikasi Pemilihan Kualitas 60

Gambar 4.15. Hasil Capture Software Wireshark yang menangkap paket-paket RTP

61

Gambar 4.16. Hasil analisa RTP Streams Analysis yang ditangkap 61

Gambar 4.17. Hasil Analisa paket data RTP dari “Server1” 62

Gambar 4.18. Hasil Analisa paket data RTP dari “Server2” 63

Gambar 4.19. Tampilan Halaman “live stream” 64

Gambar 4.20. Permintaan pengaktifan Java Plugin pada web browser 64

Gambar 4.21. Pemutaran on demand Streaming Radio “Server1” 65

Gambar 4.22. Pemutaran on demand Streaming Radio “Server2 65

Gambar 4.23. Grafik Perbandingan Delay “Server1” dan “Server2” 66

x

DAFTAR TABEL

HALAMAN

Tabel 1.1. Perbandingan dengan yang sudah ada 2

Tabel 2.1. Perbandingan codec audio 14

Tabel 3.1. Atribute database 36

Tabel 4.1. Pengujian Kompatibilitas 49

Tabel 4.2. Identifikasi dan Pelaksanaan Pengujian Skenario 52

Tabel 4.3. Hasil Pengujian Kompatibilitas 53

Tabel 4.4. Hasil Pengujian Delay pada Aplikasi Website on demand Streaming

Radio 66

Tabel 4.5. Hasil Pengujian Skenario 67

xi

DAFTAR KODE

HALAMAN

Kode 3.1. Daftar perangkat keras inputan 37

Kode 3.2. Media info sebagai data sumber 37

Kode 3.3. Lokasi media sebagai data sumber 38

Kode 3.4. Lokasi Output streaming radio server 1 38

Kode 3.5. Lokasi Output streaming radio server 2 38

Kode 3.6. Pengambilan dan Penampilan seluruh data dari Database 40

Kode 3.7. Penambahan data kedalam Database 40

Kode 3.8. Ubah data dari Database 40

Kode 3.9. Hapus data dari Database 40

Kode 3.10. Player Audio HTML5 43

Kode 3.11. Menggundang applet player 44

Kode 3.12. Pembuatan class StreamingApplet 44

xii

DAFTAR SINGKATAN

ARP Address Resolution Protocol

CSS Cascading Style Sheet

Codec Compression-Decompression

DNS Domain Name Service

FTP File Transfer Protocol

HTML HyperText Markup Language

HTTP HyperText Transfer Protocol

ICMP Internet Control Message Protocol

IGMP Internet Group Management Protocol

IP Internet Protocol

ITU International Telecommunication Union

JMF Java Media Framework

JVM Java Virtual Machine

LAN Local Area Network

PCM Pulse Code Modulation

PHP PHP: Hypertext Preprocessor

RAM Random Access Memory

RPE-LTP RegularPulse Excitation LongTerm Predictor

RTCP Real Time Control Protocol

RTP RealTime Transport Protocol

RTSP Real Time Streaming Protocol

SGML Standard Generalized Markup Language

SMPTP Simple Mail Transfer Protocol

SQL Structure Query Language

Telnet Telecommunication Network

TCP/IP Transmission Control Protocol/Internet Protocol

UDP User Datagram Protocol

UI User Interface

URL Uniform Resource Locator

W3C World Wide Web Consortium

WAMP Windows, Apache, MySQL, PHP

WiFi Wireless Fidelity

xiii

WHATWG Web Hypertext Application Technology Working Group

WWW World Wide Web