Add Audio Tag Html

3 min read Jul 02, 2024
Add Audio Tag Html

Memainkan Audio di Halaman Web dengan Tag Audio HTML

Tag <audio> adalah elemen HTML5 yang memungkinkan Anda untuk menyematkan audio di halaman web Anda. Tag ini menyediakan cara mudah dan serbaguna untuk menambahkan suara ke situs web Anda, seperti musik latar, efek suara, podcast, dan lainnya.

Cara Menggunakan Tag Audio


Penjelasan:

  • <audio>: Tag pembuka dan penutup untuk elemen audio.
  • controls: Atribut yang menambahkan kontrol pemutar audio default (play, pause, volume, dll.).
  • <source>: Tag ini menentukan sumber audio. Anda dapat menggunakan beberapa tag <source> untuk menyediakan versi audio yang berbeda dalam format yang berbeda, sehingga browser dapat memilih versi yang kompatibel.
  • src: Atribut ini menentukan URL file audio.
  • type: Atribut ini menentukan tipe MIME dari file audio.
  • "Your browser does not support the audio element.": Teks ini akan ditampilkan jika browser tidak mendukung elemen audio.

Atribut Audio Lainnya

Selain controls, tag <audio> memiliki beberapa atribut lain yang dapat Anda gunakan:

  • autoplay: Memulai pemutaran audio secara otomatis ketika halaman dimuat.
  • loop: Mengulang pemutaran audio secara berulang.
  • preload: Menentukan apakah audio harus dimuat di awal, saat dibutuhkan, atau tidak sama sekali.
  • muted: Mematikan audio secara default.
  • volume: Menetapkan volume audio (antara 0 dan 1).

Contoh Penggunaan

1. Memutar Musik Latar:


Kode ini akan memutar file audio "music.mp3" secara otomatis saat halaman dimuat dan mengulanginya secara terus menerus.

2. Menampilkan Efek Suara:






Kode ini menampilkan tombol "Play Sound". Ketika tombol diklik, fungsi playAudio() akan dipanggil dan memainkan file audio "sound.wav".

Kesimpulan

Tag <audio> memungkinkan Anda untuk dengan mudah menambahkan audio ke halaman web Anda. Dengan menggunakan berbagai atribut dan kombinasi tag <source>, Anda dapat mengontrol cara audio diputar dan memastikan kompatibilitas dengan berbagai browser.

Latest Posts