Menambahkan audio di HTML

03 May 2025

Menambahkan Audio pada HTML

HTML menyediakan tag <audio> untuk menyematkan file audio ke dalam halaman web. Dengan elemen ini, pengguna dapat memutar suara, musik, atau rekaman langsung dari browser.

Sintaks Dasar

<audio controls>
  <source src="audio-file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Penjelasan:

<audio>: Tag utama untuk menyisipkan audio.
controls: Menampilkan kontrol pemutar audio (play, pause, volume).
<source>: Menentukan file audio yang akan diputar.
type: Menentukan format audio (misalnya audio/mpeg, audio/ogg, dll).
Teks di dalam <audio> ditampilkan jika browser tidak mendukung tag ini.

Contoh Lengkap

<h2>Contoh Audio</h2>
<p>Berikut adalah audio sederhana:</p>

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

Atribut Tambahan

Atribut	Deskripsi
`autoplay`	Audio akan langsung diputar saat halaman dimuat.
`loop`	Memutar ulang audio secara terus-menerus.
`muted`	Memulai audio dalam keadaan tanpa suara.
`preload`	Menentukan apakah audio harus dimuat saat halaman dimuat. Nilai: `auto`, `metadata`, `none`.

Contoh:

<audio controls autoplay loop muted preload="auto">
  <source src="backsound.mp3" type="audio/mpeg">
</audio>

Catatan: Beberapa browser membatasi pemutaran otomatis audio, terutama jika tidak ada interaksi pengguna.

Format Audio yang Didukung

Format	MIME Type	Dukungan Browser
MP3	`audio/mpeg`	Semua browser modern
OGG	`audio/ogg`	Firefox, Chrome, Opera
WAV	`audio/wav`	Semua browser modern

Kesimpulan

Menambahkan audio ke dalam halaman HTML sangat mudah dengan menggunakan elemen