Advertisement
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.
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
|
1.) Kode Html 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 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 :
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”.
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 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>
|
Setelah kode diatas dijalankan dibrowser mozilla
firefox maka pada web akan terdengar suara dari file "house.ogg"
Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.
Terima Kasih.
EmoticonEmoticon