Format Tampilan Audio pada HTML

Tags

Format Tampilan Audio pada HTML


A)    Format Tampilan File Audio

Pada umumnya file audio diputar melalui sebuah plug-in, contohnya seperti flash. Akan tetapi, browser yang berbeda mungkin mempunyai berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan sebuah file audio pada halaman web: elemen <audio> </audio>.

Untuk memasukkan file suara pada html bisa dengan menggunakan tag <audio>. Format suara yang sudah didukung hingga saat ini ialah MP3, Ogg dan WAP. Sementara file-file Audio yang didukung pada HTML5 yaitu MP3, WAV, dan OGG. Tidak semua tipe file audio ini didukung oleh browser.
1)      MP3 adalah format audio yang didukung oleh Google Chrome dan safari.
2)      OGG adalah format audio yang didukung oleh Mozilla firefox, opera, dan google chrome.
3)      WAV adalah format audio yang didukung oleh Mozilla Firefox dan Opera.

Jenis-jenis file audio yang dukungan pada web browser dapat dilihat pada tabel dibawah ini:

Format Tampilan Audio pada HTML
Format Tampilan Audio pada HTML

a)      Dari tabel di atas bisa dilihat bahwa apabila saat meletakan file mp3 di website yang kita buat, akan ada beberapa orang yang tidak dapat memutar hasil embed mp3 di website yang sudah kita buat tersebut. Hal tersebut bisa jadi disebabkan karena browser yang dipergunakan oleh orang yang bersangkutan tidak support pada file berekstensi mp3.
b)      MIME untuk format audio. MIME (Multipurpose Internet Mail Extension) dipergunakan untuk mekanisme pengiriman berbagai informasi seperti text, gambar, suara, aplikasi, video, dan sebagainya agar browser tidak salah dalam menterjemahkan konten yang diterima. Tidak hanya pada web saja, email juga mempergunakan MIME. Berikut ini ialah tipe mime untuk format audio: MP3 audio/mpeg, Ogg audio/ogg, Wav audio/wav.

B)     Menyajikan Audio dalam Tampilan Web

File audio seperti halnya mp3 bisa diputar melalui tag <audio> < /audio>. Berikut ialah format lengkap untuk memainkan musik 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 kita mencoba listing program diatas, file audio harus ditempatkan dalam satu folder yang sama dengan file *.htm dan nama file audionya harus disesuaikan dengan file audio yang kita gunakan. Untuk listing program diatas mempergunakan file audio bernama "house.mp3" dan "house.ogg". Apabila listing program di atas dijalankan maka akan menghasilkan tampilan audio di browser web. Tekanlah tombol play untuk memulai menjalankan audionya.

Format Tampilan Audio pada HTML

Atribut yang dipakai pada tag <audio> </audio> bisa juga menggunakan atribut autoplay, controls dan loop. Detail atribut pada audio antara lain sebagai berikut:
1)      Autoplay <audio autoplay="autoplay"> yaitu memulai audio secara otomatis pada web terbuka.
2)      Loop <audio loop="loop"> yaitu mengulang audio kembali setelah pemutaran awal selesai.
3)      Controls <audio controls = "controls"> yaitu menampilkan kontrol seperti volume, audio, dan juga tombol untuk memulai/pause.
4)      Preload <audio preload="preload"> yaitu memuat ulang audio ketika halaman dimuat ulang.
5)      Muted <audio muted =”muted”> yaitu mematikan suara.
6)      Src <audio> source src="/usr/home/damay/house.ogg"</audio> yaitu Value dari src ialah file audio tersebut berserta lokasi filenya bisa juga mengarahkan suatu alamat url/web audio tertentu.

Berikut ini ialah listing program audio yang sudah diberi atribut control, autoplay dan loop. Tatkala listing program tersebut dijalankan maka audio secara otomatis akan berjalan tanpa harus menekan 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>

Apabila listing program di atas dijalankan maka akan menghasilkan tampilan audio pada browser. Audio tersebut akan mulai diperdengarkan tanpa harus susah payah menekan tombol play. Audio akan terus dimainkan kembali ketika audio tersebut sudah habis waktunya, hal ini karena pada atribut audio di set “loop”.

Format Tampilan Audio pada HTML

C)    Plug-in Audio

Plug-in adalah sebuah program komputer kecil yang memperluas fungsi standar dari sebuah browser. Plug-in bisa ditambahkan ke halaman HTML dengan menggunakan tag <object> atau tag <embed>.

1)      Tag <embed>

Tag <embed> ini diartikan sebagai sebuah wadah untuk konten eksternal (non- HTML). Dibawah ini adalah potongan kode untuk memainkan file *.mp3 yang embed/tertanam di halaman web yang antara lain yaitu:

<!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>

Sesudah kode di atas tersebut dijalankan pada browser mozilla firefox maka pada web tersebut akan muncul tampilan seperti contoh dibawah, dan file house mp3 tidak bisa terdengar suaranya karena browser mozilla firefox tidak mendukung untuk file audio *.mp3.

Format Tampilan Audio pada HTML

2)      Tag <object>

Format audio bisa juga didefiniskan sebagai obyek ekternal untuk konten non HTML dengan memakai tag <obyek>. Berikut ini adalah 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>

Sesudah kode di atas tersebut dijalankan pada browser mozilla firefox maka pada halaman web akan terdengar suara dari file "house.ogg"

Format Tampilan Audio pada HTML

Berkomentarlah sesuai dengan topik artikel
EmoticonEmoticon