1.)
Format tampilan file audio
Kebanyakan file audio
diputar melalui sebuah plug-in, misalnya seperti flash. Namun, browser yang
berbeda mungkin memiliki berbagai plug-in. HTML5 mendefinisikan elemen baru
yang menentukan cara standar untuk menanamkan file audio pada halaman web:
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
yes
update:
firefox 21 running on windows 7, windows 8, windows vista,
android now supports mp3
|
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 *.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
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"
|
Value dari src adalah file audio tersebut berserta lokasi
filenya bisa juga mengarahkan suatu
|
|
|
</audio>
|
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”.
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 (nonHTML).
Adapun potongan kode untuk memainkan
file *.mp3 yang embed/tertanam di
halaman web 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.
Tag
<object>
Format audio
dapat pula didefiniskan sebagai obyek ekternal untuk konten non HTML dengan
menggunakan tag<obyek>. Berikut
ini potongan kode program untuk menampilkan file audio
<!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>
Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :
1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon