Menambahkan Audio di HTML

24 Apr 2025 -

Penjelasan tentang Menambahkan Audio di HTML

Cara Menambahkan Audio di HTML

Tag `<audio>`

HTML menyediakan tag <audio> khusus untuk memutar file suara seperti musik, efek suara, atau rekaman suara. Dengan tag ini, kamu bisa menyisipkan file audio ke dalam halaman web dan memberi kontrol kepada pengguna seperti tombol play, pause, dll.

Contoh Dasar:

<audio controls>
  <source src="audio/nama-file.mp3" type="audio/mpeg">
  Browser kamu tidak mendukung pemutar audio.
</audio>

Penjelasan Atribut:

<audio>: Tag utama untuk menampilkan pemutar audio.
controls: Menampilkan kontrol standar (play, pause, volume).
<source>: Menunjukkan file audio yang ingin diputar.
src: Lokasi file audio, bisa lokal atau URL.
type: Tipe format file audio:
- audio/mpeg untuk MP3
- audio/ogg untuk OGG
- audio/wav untuk WAV

Atribut Tambahan:

autoplay: Memutar audio otomatis saat halaman dimuat (sering diblokir browser).
loop: Mengulang audio terus menerus.
muted: Memulai audio dalam keadaan dibisukan.
preload: Memberitahu browser apakah audio akan dimuat saat halaman dimuat.
- auto, metadata, atau none

Contoh:

<audio controls autoplay loop muted preload="auto">
  <source src="lagu.mp3" type="audio/mpeg">
  Browser tidak mendukung tag audio.
</audio>

Format Audio yang Didukung

Format	Ekstensi	Type	Dukungan Browser
MP3	`.mp3`	audio/mpeg	✅ Umum digunakan
OGG	`.ogg`	audio/ogg	✅ (terutama Firefox)
WAV	`.wav`	audio/wav	✅ (ukuran file besar)

Disarankan menyediakan beberapa format agar kompatibel di semua browser.

Contoh Multi-Format:

<audio controls>
  <source src="audio/file.mp3" type="audio/mpeg">
  <source src="audio/file.ogg" type="audio/ogg">
  Browser tidak mendukung audio HTML5.
</audio>

Fallback Text

Teks di antara tag <audio> akan ditampilkan jika browser tidak mendukung elemen tersebut. Ini penting sebagai antisipasi agar pengguna tetap tahu ada audio di halaman.

Tips:

Simpan file audio di folder khusus, misalnya audio/.
Gunakan format .mp3 sebagai prioritas karena dukungan paling luas.
Jangan gunakan autoplay jika tidak penting — bisa mengganggu pengguna.
Gunakan file kecil untuk mempercepat loading halaman.

Kesimpulan

Menambahkan audio di HTML sangat mudah menggunakan tag <audio>. Dengan memberikan kontrol, format yang tepat, dan penanganan fallback yang baik, kamu bisa menciptakan pengalaman audio yang nyaman bagi pengunjung situs kamu.