Audio HTML: Contoh Tag dan Code Sintaknya

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Catur Kurnia Sari October 3, 2020

Elemen <audio> pada HTML berfungsi untuk memutar file audio di halaman web.

Section Artikel

1 Elemen <audio> HTML
2 Cara Kerja- Audio HTML
3 Browser yang Mendukung Audio
4 Format Audio HTML
5 Media Type – Audio HTML
6 Audio HTML – Method, Properti, dan Event
7 Tag Audio HTML

Elemen <audio> HTML

Untuk memutar file audio dalam HTML, gunakan elemen <audio>.

Contoh :

<!DOCTYPE html>
<html>
<body>

<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Browser Anda tidak mendukung elemen audio.
</audio>

</body>
</html>

Cara Kerja- Audio HTML

Atribut kontrol pada elemen <audio> menambahkan fungsi kontrol audio seperti putar, jeda, dan volume.

Kemudian elemen <source> ini memungkinkan HTML untuk menentukan file audio alternatif yang dapat dipilih browser. Browser akan menggunakan format pertama yang dikenali.

Teks yang terletak diantara tag <audio> dan </audio> hanya akan ditampilkan apabila browser yang digunakan tidak mendukung elemen <audio>.

Browser yang Mendukung Audio

Berikut ini adalah tiga format audio yang didukung oleh web browser : MP3, WAV, dan OGG. Angka dalam tabel menunjukan versi pertama pada browser yang mendukung elemen <audio>.

Elemen	Chrome	Edge	Firefox	Safari	Opera
<audio>	4.0	9.0	3.5	4.0	10.5

Format Audio HTML

Ada tiga format audio yang didukung: MP3, WAV, dan OGG. Web browser yang mendukung dan tidak mendukung ketiga format audio dapat dilihat pada tabel di bawah ini:

Browser	MP3	WAV	OGG
Edge/IE	YA	TIDAK	TIDAK
Chrome	YA	YA	YA
Firefox	YA	YA	YA
Safari	YA	YA	TIDAK
Opera	YA	YA	YA

Media Type – Audio HTML

Format File	Media Type
MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

Audio HTML – Method, Properti, dan Event

HTML DOM mendefinisikan method, properti, dan even untuk elemen <audio>.

HTML DOM juga memungkinkan untuk memuat, memutar, dan menjeda audio, serta mengatur durasi dan volume.

Ada juga Event DOM yang dapat memberi notifikasi saat audio mulai diputar, dijeda, dll.

Tag Audio HTML

Tag	Description
<audio>	Mendefinisikan konten audio
<source>	Mendefinisikan beberapa sumber media untuk elemen media, seperti <audio> dan <video>

html