Format Tampilan Audio
1.) Format
tampilan file audio
Kebanyakan fileaudiodiputar melaluisebuah plug-in, misalnya seperti
flash. Namun,browser
yang berbedamungkin memilikiberbagai plug-in.HTML5mendefinisikanelemen baruyang
menentukancara standar untukmenanamkanfile audiopada halamanweb: elemen<audio></audio>.
Untuk memasukkan suara pada
html bisa menggunakan tag <audio>. Format suara yang telah didukung
hingga saat ini adalah MP3, Ogg dan WAP. File-file Audio yang didukung HTML5
adalah MP3,WAV, dan OGG. Tidak semua tipe file
audio tersebut didukung oleh browser.
§ OGG merupakan format audio
yang didukung oleh Mozilla firefox, opera, dan google chrome.
§ MP3 merupakan format audio
yang didukung oleh Google Chrome dan safari.
§ WAV merupakan format audio
yang didukung oleh Mozilla Firefox dan Opera.
Jenis file audio untuk dukungan pada
web browser bisa dilihat pada tabel berikut ini.
|
Browser
|
MP3
|
Wav
|
Ogg
|
|
Internet Explorer
|
Yes
|
no
|
no
|
|
Chrome
|
Yes
|
yes
|
yes
|
|
Firefox
|
no
update: firefox 21 running on windows 7, windows 8, windows vista,
android now supports mp3
|
yes
|
yes
|
|
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
|
audio/mpeg
|
|
Ogg
|
audio/ogg
|
|
Wav
|
audio/wav
|
2.) Menyajikan
audio dalam tampilan web
File
audio
seperti mp3 dapat dilantunkan melalui tag<audio>< /audio>. Berikut adalah format lengkap untuk memainkan
musik ke dalam aplikasi web.
|
<html>
<head>
<title>cek suara</title>
</head>
<body>
<audio controls>
<source src="house.mp3"
type="audio/mp3">
<source src="house.ogg"
type="audio/ogg">
</audio>
</body>
</html>
|
Ketika mencoba listing program diatas , file audio ditempatkan dalam
satu folder yang sama dengan file *.htmdan
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.
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
|
|
<audio autoplay="autoplay">
|
memulai
audio secara otomatis pada web terbuka
|
|
|
<audio
controls = "controls" >
|
menampilkan kontrol seperti volume,
audio, dan juga tombol untuk memulai/pause
|
|
|
<audio loop="loop">
|
mengulang
audio kembali setelah pemutaran awal selesai
|
|
|
<audio
muted =”muted” >
|
mematikan suara
|
|
|
<audio preload="preload">
|
memuat
ulang audio ketika halaman dimuat ulang
|
|
|
<audio>
source
src="/usr/home/damay/house.ogg"
</audio>
|
Value dari src adalah file audio tersebut berserta lokasi
filenya bisa juga mengarahkan suatu alamat url/web 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>
<title>cek suara</title>
</head>
<body>
<audio controls = "controls"
autoplay="autoplay" loop="loop" >
<source src="house.mp3"
type="audio/mp3">
<source src="house.ogg"
type="audio/ogg">
</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”.
1.) Plug-in
audio
Plug-in merupakan
sebuah program komputerkecil yangmemperluas fungsistandar dari sebuah browser.Plug-in dapat
ditambahkanke halamanHTMLmenggunakantag<object>atautag<embed>.
Tag<embed>
Tag<embed>diartikan
sebagaisebuah wadah untukkonten eksternal(non-HTML). Adapun potongan kode untuk memainkan
file*.mp3yang
embed/tertanam di halamanweb adalah
|
<!DOCTYPE html>
<html>
<body>
<embed
height="50" width="100" src="house.mp3">
<p>Bila
anda tidak dapat mendengar suara, maka kemungkinan browser yan anda gunakan
tidak support dengan format file audionya</p>
<p>atau
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
.
|
<!DOCTYPE html>
<html>
<body>
<object
height="50" width="100" data="house.ogg"></object>
<p>Bila anda tidak
dapat mendengar suara, maka kemungkinan browser yan anda gunakan tidak
support dengan format file audionya</p>
<p>atau 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"
Rangkuman
Dari kegiatan belajar berikut ini dapat dibuat rangkuman
materi sebagai berikut :
o cara standar untukmenanamkanfile audiopada
halamanweb: elemen<audio></audio>.
o File-file Audio yang
didukung HTML5 adalah MP3,WAV dan OGG.
o Atribut Audio dituliskan
dalam elemen <audio xxxxxx= “ xxxxxx” >
o Atribut Audio yang
digunakan dalam penulisan html diantaranya controls, autoplay, loop, muted,
preload dan src.
o File audio dapat juga
dituliskan menggunakan tag <embed> dan tag<object>
Komentar
Posting Komentar