Pemrograman Web Semester 1
143 | P a g e
Safari yes
yes no
Opera
no yes
yes a. Dari tabel di atas dapat dilihat bahwa bila saat meletakan file mp3 di web
yang kita buat, akan ada beberapa orang yang tidak bisa memutar hasil embed mp3 di web yan telah kita buat tersebut. Hal tersebut bisa jadi
disebabkan browser yang digunakan tidak support pada file berekstensi mp3.
b. MIME untuk format audio MIME Multipurpose Internet Mail Extension digunakan untuk mekanisme
untuk mengirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yg
diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format audio.
Format MIME-type
MP3
audiompeg
Ogg
audioogg
Wav
audiowav
2. Menyajikan audio dalam tampilan web
File audio seperti mp3 dapat dilantunkan melalui tagaudio audio. Berikut adalah format lengkap untuk memainkan musik ke dalam aplikasi
web.
html head
titlecek suaratitle head
body audio controls
source src=house.mp3 type=audiomp3 source src=house.ogg type=audioogg
audio
Di unduh dari : Bukupaket.com
PEMROGRAMAN WEB SEMESTER 1
144 | P a g e
body html
Ketika mencoba listing program diatas , file audio ditempatkan dalam satu folder yang sama dengan file
.htm dan nama file audio nya disesuaikan dengan
file audio yang anda gunakan. Untuk listing program di atas menggunakan file audio bernama
house.mp3 dan
house.ogg. Bila listing program diatas dijalankan akan menghasilkan tampilan audio di
browser . Tekan tombol play untuk memulai menjalan audionya.
Gambar 12.1 tampilan audio saat dalam web
Atribut yang digunakan pada tag audio audio dapat juga menggunakan atribut autoplay, loop dan controls. Detail atribut pada audio
adalah sebagai berikut :
Atribut Sintaks
Keterangan autoplay
audio autoplay=autoplay memulai audio secara otomatis
pada web terbuka
controls
audio controls = controls menampilkan kontrol seperti
volume, audio, dan juga tombol untuk memulaipause
loop audio loop=loop
mengulang audio kembali setelah pemutaran awal selesai
muted audio muted
=”muted” mematikan suara
preload audio preload=preload
memuat ulang audio ketika halaman dimuat ulang
src audio
source src=usrhomedamayhouse.ogg
Value dari src adalah file audio tersebut berserta lokasi filenya
bisa juga mengarahkan suatu
Tombol play
Di unduh dari : Bukupaket.com
Pemrograman Web Semester 1
145 | P a g e
audio alamat urlweb audio tertentu
Berikut adalah listing program audio yang telah diberi atribut control, autoplay serta loop . Ketika listing program tersebut dijalankan maka audio akan
berjalan secara otomatis tanpa harus ditekan tombol play . html
head titlecek suaratitle
head body
audio controls = controls autoplay=autoplay loop=loop
source src=house.mp3 type=audiomp3 source src=house.ogg type=audioogg
audio body
html
Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Audio akan mulai diperdengarkan tanpa harus menekan tombol play.
Audio akan terus dimainkan kembali ketika audio sudah habis waktunya karena pada atribut audio di set “loop”.
Di unduh dari : Bukupaket.com
PEMROGRAMAN WEB SEMESTER 1
146 | P a g e
Gambar 12.2 tampilan audio saat dimainkan dalam web
3.
Plug-in audio
Plug-in merupakan sebuah program komputer kecil yang memperluas fungsi standar dari sebuah browser. Plug-in dapat ditambahkan ke halaman
HTML menggunakan tag object atau tag embed. Tag
embed
Tag embed diartikan sebagai sebuah wadah untuk konten eksternal non- HTML. Adapun potongan kode untuk memainkan file
.mp3 yang
embedtertanam di halaman web adalah DOCTYPE html
html body
embed height=50 width=100 src=house.mp3 pBila anda tidak dapat mendengar suara, maka kemungkinan browser yan anda
gunakan tidak support dengan format file audionyap patau bisa juga speaker anda sedang off :p
body
html
Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web akan akan muncul tampilan berikut, dan file house.mp3 tidak terdengar suaranya
karena browser mozilla firefox tidak mendukung file audio .mp3.
Di unduh dari : Bukupaket.com
Pemrograman Web Semester 1
147 | P a g e
Gambar 12.3 tampilan audio dengan tag embed
Tag object
Format audio dapat pula didefiniskan sebagai obyek ekternal untuk konten non HTML dengan menggunakan
tagobyek. Berikut ini potongan kode
program untuk menampilkan file audio
DOCTYPE html html
body object height=50 width=100
data=house.oggobject
pBila anda tidak dapat mendengar suara, maka kemungkinan browser yan anda gunakan tidak support
dengan format file audionyap
patau bisa juga speaker anda sedang off :p body
html
Setelah kode diatas dijalankan dibrowser mozilla firefox maka pada web akan
terdengar suara
dari file
house.ogg
Gambar 12.4 tampilan audio dengan tag obyek
Di unduh dari : Bukupaket.com
PEMROGRAMAN WEB SEMESTER 1
148 | P a g e
c. Rangkuman
