HTML audio tag | belajar <audio> element
Referensi Belajar HTML audio tag. Tutorial dan panduan mengenai element <audio>...</audio>
. Bagaimana memutar file audio seperti MP3, OGG dan WAV di dalam browser. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <audio>.
Deskripsi
Penjelasan HTML audio
HTML audio
element menunjukkan sebuah sound atau audio yang dapat disisipkan pada halaman web dan diputar untuk didengarkan.
Modern browser mendukung beberapa format file audio diantaranya: mp3, ogg dan wav.
Konten lain (seperti teks) dapat disisipkan untuk browser yang tidak mendukung HTML5 audio, dan apabila audio file tidak dapat diputar, maka konten ini akan muncul sebagai gantinya (fallback).
Media Formats
Tipe Media untuk HMTL audio element
Format | Penjelasan | Extensi File | MIME Types |
---|---|---|---|
MP3 | MP3 adalah MPEG-1 atau MPEG-2 Audio Layer III, merupakan format audio paling terkenal yang menggunakan format lossy data compression. | .mp3 | audio/mp3 |
Ogg Vorbis | Format free, open standar yang menyuguhkan kualitas audio lebih baik dari MP3. | .ogg | audio/ogg |
WAV | Format original untuk raw digital audio. Format WAV tidak menggunakan metode kompresi file sehingga ukurannya lebih besar dari format lainnya. | .wav | audio/wav |
Attributes
Atribut HTML Tag <audio>
Global Attributes
Atribut Secara Global (Keseluruhan)
<audio> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.
Event Attributes
Atribut event (Peristiwa)
<audio> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.
Example
Contoh HTML <audio>
element
Contoh 1:
HTML audio
dengan satu sumber file audio (.mp3) dan konten paragraf (<p>) yang akan muncul apabila browser tidak mendukung html audio.
<audio src="/media/audio/kucing.mp3" controls>
<p>
<strong>Download File: </strong>
<a href="/media/audio/kucing.mp3">"MP3"</a>
</p>
</audio>
Contoh 2:
HTML audio
element yang merujuk format audio lebih dari satu didalam element <source> untuk dukungan browser yang berbeda-beda.
<audio controls>
<source src="/media/audio/kucing.mp3" type="audio/mpeg" >
<source src="/media/audio/kucing.ogg" type="audio/ogg" >
<source src="/media/audio/kucing.wav" type="audio/wav" >
<p> <strong>Download Audio:</strong>
Format: <a href="/media/audio/kucing.mp3">"MP3"</a>
Format: <a href="/media/audio/kucing.ogg">"Ogg"</a>
</p>
</audio>
Contoh Lengkap
Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contoh Cross browser audio</title>
</head>
<body>
<h1>Contoh HTML audio element</h1>
<p>Contoh HMTL audio element dengan beberapa format audio.</p>
<audio controls preload="none">
<source src="/media/audio/kucing.mp3" type="audio/mpeg" >
<source src="/media/audio/kucing.ogg" type="audio/ogg" >
<source src="/media/audio/kucing.wav" type="audio/wav" >
<p> <strong>Download Audio:</strong>
Format: <a href="/media/audio/kucing.mp3">"MP3"</a>
Format: <a href="/media/audio/kucing.ogg">"Ogg"</a>
</p>
</audio>
</body>
</html>
SHARE