Dukungan Tag Audio HTML
Tag <audio> di HTML5 menyediakan cara yang mudah dan fleksibel untuk menambahkan konten audio ke halaman web Anda. Berikut adalah panduan lengkap tentang tag <audio> dan cara menggunakannya secara efektif.
Sintaks Dasar
Tag <audio> menggunakan sintaks yang sederhana:
Penjelasan:
<audio>: Tag pembuka dan penutup untuk elemen audio.controls: Atribut yang menampilkan kontrol audio default seperti tombol putar, jeda, volume, dan progress bar.<source>: Tag ini menentukan sumber audio. Anda dapat menyertakan beberapa tag<source>untuk mendukung berbagai format audio.src: Atribut yang menentukan URL dari file audio.type: Atribut yang menentukan tipe MIME dari file audio.- "Your browser does not support the audio element.": Teks fallback yang ditampilkan jika browser tidak mendukung tag
<audio>.
Format Audio yang Didukung
Tag <audio> mendukung beberapa format audio populer, termasuk:
- MP3: Format audio yang paling umum.
- OGG: Format audio yang bebas royalti.
- WAV: Format audio berkualitas tinggi.
- AAC: Format audio yang efisien dan berkualitas tinggi.
Atribut Umum
Selain controls, tag <audio> memiliki beberapa atribut umum yang dapat Anda gunakan untuk mengontrol pemutaran audio:
autoplay: Memutar audio secara otomatis saat halaman dimuat.loop: Mengulang pemutaran audio secara berulang.muted: Mematikan suara audio secara default.preload: Menentukan bagaimana browser harus memuat audio:auto: Memuat audio sepenuhnya saat halaman dimuat.metadata: Memuat hanya metadata audio (seperti durasi dan judul).none: Tidak memuat audio hingga pengguna mengkliknya.
JavaScript dan Tag <audio>
Anda dapat menggunakan JavaScript untuk mengontrol pemutaran audio dengan lebih detail, seperti:
- Memutar, menjeda, dan menghentikan pemutaran.
- Mengatur volume audio.
- Memulai pemutaran dari waktu tertentu.
- Menambahkan event listener untuk pemutaran dan penghentian.
Contoh
Berikut adalah contoh bagaimana menggunakan tag <audio> dengan berbagai atribut:
Contoh ini menampilkan audio MP3 dengan kontrol default, memutar audio secara otomatis, mengulangi pemutaran, menonaktifkan suara secara default, dan hanya memuat metadata audio saat halaman dimuat.
Kesimpulan
Tag <audio> di HTML5 menyediakan cara yang mudah dan fleksibel untuk menambahkan konten audio ke halaman web Anda. Dengan memahami sintaks dasar dan berbagai atribut yang tersedia, Anda dapat dengan mudah mengontrol pemutaran audio dan menyesuaikannya dengan kebutuhan Anda.