Menambahkan Audio di HTML

11 Jun 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

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>

Kesimpulan

Tag <audio> di HTML5 memberikan cara sederhana dan fleksibel untuk menyisipkan suara ke dalam halaman web. Dengan hanya beberapa baris kode, kamu dapat menambahkan musik latar, efek suara, atau narasi yang memperkaya pengalaman pengguna. Pastikan kamu menggunakan format audio yang umum seperti .mp3, dan manfaatkan atribut seperti controls, autoplay, loop, dan muted sesuai kebutuhan agar audio bekerja optimal di semua browser.