HTML element tag <audio> merupakan tag HTML yang digunakan untuk menambahkan data audio ke dalam halaman HTML. HTML element tag <audio> akan mengenali dan memainkan file audio dalam bentuk suara atau musik. Secara default tag <audio> akan menampilkan pemutar audio yang dilengkapi dengan beberapa kontrol seperti tombol play, pause, volume, track bar, ataupun track position.
Setiap browser memiliki tampilan yang berbeda meskipun menggunakan HTML tag <audio> yang sama. Dukungan untuk memutar file audio pada media filenya setiap brwoser juga berbeda.
File audio file dengan dalam bentuk file .mp3 adalah file audio yang dapat dimainkan pada hampir semua browser. Kemudian disusul oleh audio file jenis .wav.
Penggunaan file audio dengan jenis .ogg dan .acc perlu dihindari karena hanya didukung oleh beberapa browser saja. Jadi jika anda ingin menambahkan file audio pada halaman HTML, sebaiknya menggunakan audio file jenis .mp3. Proses konversi file audio yang tidak didukung oleh browser ke dalam bentuk file .mp3 perlu dilakukan, jika file tersebut akan digunakan di dalam halaman HTML.
Anda dapat memasukkan beberapa file audio dengan format yang berbeda di dalam tag <audio> tepatnya di dalam tag <source>. Browser akan memainkan file audio yang pertama secara default. Jika file audio pertama tidak didukung akan memainkan file audio yang kedua dan seterusnya. Namun jika file audio yang dimiliki hanya satu, dapat menggunakan atribut SRC dengan isi URL dimana file audio tersebut diletakkan.
Penggunaan Tag AUDIO
Hal yang perlu disiapkan pertama adalah file audio itu sendiri. File tersebut diletakkan sejajar dengan halaman HTML aktif. File audio tersebut dapat dipanggil dan dimainkan pada browser dengan menyertakan nama dan extensi file audio di dalam atribut SRC.
Berikut cara menggunakan audio player melalui tag <audio> :
HTML
1
2
3
4
5
6
7
<audio controls>
<source src="Crickets_Chirping.wav" type="audio/wav">
<source src="Crickets_Chirping.ogg" type="audio/ogg">
<source src="Crickets_Chirping.mp3" type="audio/mpeg">
<!--Tulisan dibawah ini akan muncul jika tak ada file yang didukung browser -->
<p>Native audio playback is not supported.</p>
</audio>
Akan menghasilkan tampilan :
Atribut Khusus
HTML element tag <audio> memiliki atribut yang dapat digunakan untuk menampilkan, memainkan dan menata pemutar fle pada halaman HTML.
Atribut khusus pada tag audio sangat berhubungan dengan audio player untuk memainkan file audio di dalam halaman HTML.
Berikut contoh penggunaan tag <audio> pada HTML :
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Belajar Menggunakan HTML Element Tag AUDIO</title>
<style>
audio{display: block;}
</style>
</head>
<body>
<h1>Latihan Menggunakan HTML Element Tag AUDIO</h1>
<audio controls>
<source src="Crickets_Chirping.wav" type="audio/wav">
<source src="Crickets_Chirping.ogg" type="audio/ogg">
<source src="Crickets_Chirping.mp3" type="audio/mpeg">
<!--Tulisan dibawah ini akan muncul jika tak ada file yang didukung browser -->
<p>Native audio playback is not supported.</p>
</audio>
</body>
</html>
Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :
Browser Pendukung :
| Elemen |  |  |  |  |  |
| <audio> | 4 | 9.0 | 3.5 | 4 | 11.5 |
Global Attributes :
Tag <audio> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML
Event Attributes :
Tag <audio> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.
Pengaturan Default CSS :
Nilai default pengaturan gaya untuk elemen <audio> pada HTML :
CSS
1
2
3
Previous Pageaudio{
display : inline;
}
Tutorial HTML
Paling Banyak Dibaca
News Letters
Silahkan masukkan email Anda untuk berlangganan informasi kami
