Format Tampilan File Audio Pada Web
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.
Namun 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.
A. ME untuk format Audio
MIME (Multipurpose Internet Mail Extension) digunakan untuk mekanisme untuk mFngirim berbagai informasi seperti text, aplikasi, gambar, suara, video, dan lain sebagainya agar browser tidak salah menterjemahkan konten yang diterima. Tidak hanya pada web, email juga menggunakan MIME. Berikut adalah tipe mime untuk format audio. 2
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
B. 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">
</audio>
</body>
</html>
Bila listing program diatas dijalankan akan menghasilkan tampilan audio di browser . Tekan tombol play untuk memulai menjalan audionya.
Atribut yang digunakan pada tag 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 memulai/pause |
| 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="/usr/home/damay/house.ogg"</audio> | Value dari src adalah file audio tersebut berserta lokasi filenya bisa juga mengarahkan suatu |
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>
<section style="text-align: center;"><audio controls = "controls" autoplay="autoplay"
loop="loop" >
<source src="http://googledrive.com/host/0B7q1GyuInSWkc05yQllXTUMwbXc/" type="audio/mp3"></source>
Browser kamu tidak mendukung bro
</audio></section>
</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>..
a. 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>
b. 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>
PENCARIAN
Custom Search
POPULAR POSTS
Bangun datar merupakan bangun dua dimensi yang dibatasi oleh sebuah garis lurus atau lengkung. Beberapa bangun datar yaitu persegi, persegi ...
Perubahan musim di bumi berdampak pada kehidupan makhluk hidup, termasuk di antaranya hewan. Hewan melakukan perpindahan tempat pada musim ...
Udin dan Beni bermain bola di lapangan. Udara sore itu terasa sejuk. Angin bertiup sepoi-sepoi. Mereka asyik bermain. Tiba-tiba, langit beru...
Penilain pada kurikulum 2013 berbeda dengan KTSP, walaupun terdapat perbedaan, namun sebenarnya sama tujuannya. Peraturan Menteri Pendidikan...
Termometer pertama kali dibuat pada tahun 1592 oleh seorang ilmuwan Italia bernama Galileo Galilei yang menggunakan udara dan air. Pada tahu...
Karaktersitik setiap bahan tentu berbeda satu sama lain. Sebelum dibuat sebagai karya kerajinan yang akan dipadukan, maka kita harus memaham...
Dalam berkarya tidak terlepas pada rancangan. Rancangan adalah suatu gambar rencana atau gambar sketsa yang harus diikuti dalam proses membu...
Ukuran adalah Bilangan yang menunjukkan besar kecilnya satuan ukuran atau suatu benda yang berfungsi sebagai data dalam pembuatan pola, bai...
Powered by Blogger | Back to Top
- Dapatkan link
- X
- Aplikasi Lainnya
- Dapatkan link
- X
- Aplikasi Lainnya
0 komentar:
Post a Comment
Mohon tidak memasukan link aktif.