Audio Tag Html5

3 min read Jul 03, 2024
Audio Tag Html5

Audio Tag HTML5

Tag <audio> adalah tag HTML5 yang memungkinkan Anda untuk menyematkan audio dalam halaman web Anda. Tag ini menawarkan kontrol atas audio, seperti memutar, menjeda, menghentikan, dan mengontrol volume.

Atribut Tag <audio>:

  • src: Atribut ini menentukan URL sumber audio.
  • controls: Atribut ini menampilkan kontrol bawaan seperti tombol putar, jeda, volume, dll.
  • autoplay: Atribut ini secara otomatis memutar audio ketika halaman dimuat.
  • loop: Atribut ini mengulangi audio setelah selesai diputar.
  • muted: Atribut ini mematikan audio secara default.
  • preload: Atribut ini menentukan bagaimana browser harus memuat audio. Ada tiga nilai:
    • "auto": Memuat audio secara penuh saat halaman dimuat.
    • "metadata": Memuat hanya metadata audio.
    • "none": Tidak memuat audio sama sekali.

Contoh Penggunaan:




  Audio Tag HTML5



  

Audio Player

Kode di atas akan menampilkan audio player dengan kontrol bawaan. Jika browser tidak mendukung tag <audio>, pesan "Your browser does not support the audio element." akan ditampilkan.

Penggunaan Tag <source>:

Tag <source> digunakan untuk menentukan beberapa sumber audio dengan format berbeda. Browser akan memilih format yang didukungnya.


Kode di atas akan mencoba memutar audio audio.mp3 jika browser mendukung format MP3. Jika tidak, browser akan mencoba memutar audio audio.ogg jika browser mendukung format OGG.

Keuntungan Menggunakan Tag <audio>:

  • Penggunaan yang mudah: Tag <audio> mudah digunakan dan diimplementasikan.
  • Dukungan yang luas: Tag <audio> didukung oleh semua browser modern.
  • Kontrol yang fleksibel: Tag <audio> menawarkan berbagai kontrol audio yang dapat disesuaikan.
  • Format audio yang beragam: Tag <audio> mendukung berbagai format audio, termasuk MP3, OGG, dan WAV.

Kesimpulan:

Tag <audio> merupakan alat yang ampuh untuk menyematkan audio dalam halaman web. Tag ini sederhana, fleksibel, dan mendukung banyak format audio. Dengan menggunakan tag <audio>, Anda dapat meningkatkan interaktivitas dan pengalaman pengguna dalam halaman web Anda.

Related Post


Featured Posts