Kodeloka
  1. Kodeloka
  2. Kelas HTML
  3. Materi

2 · Media & Tabel · Modul 12 dari 27

Elemen audio dan Subtitel/Transkrip track (WebVTT) untuk Aksesibilitas Media

Menyematkan pemutar suara dan siniar (podcast) standar web menggunakan elemen <audio>, menyediakan format alternatif (audio/ogg; codecs=opus, audio/mp4, audio/mpeg) melalui <source>, mengatur strategi preload, serta melampirkan teks transkrip tersinkronisasi dengan <track kind="captions"> berformat WebVTT (.vtt).

Praktik dan kuis di kelas interaktif →

1. Struktur Elemen <audio> Multi-Sumber dengan Fallback

Jangan pernah mengaktifkan atribut autoplay pada elemen <audio> tanpa persetujuan eksplisit pengguna, karena suara mendadak mengganggu pembaca layar (screen reader) dan langsung diblokir oleh kebijakan Autoplay peramban modern.

<figure class="pemutar-audio">
  <figcaption id="judul-siniar">Episode 14: Arsitektur HTTP/3 &amp; QUIC</figcaption>
  <audio controls preload="metadata" aria-labelledby="judul-siniar">
    <source src="/media/ep14-http3.opus" type="audio/ogg; codecs=opus">
    <source src="/media/ep14-http3.m4a" type="audio/mp4">
    <source src="/media/ep14-http3.mp3" type="audio/mpeg">
    <track kind="captions" src="/media/ep14-http3.id.vtt" srclang="id" label="Bahasa Indonesia" default>
    <p>Peramban Anda tidak mendukung pemutar audio HTML5. <a href="/media/ep14-http3.mp3" download>Unduh rekaman MP3 (12 MB)</a>.</p>
  </audio>
</figure>

Catatan: Spesifikasi HTML menyebut bahwa elemen <audio> tidak memiliki area pemutaran untuk konten visual seperti takarir, sehingga peramban tidak menampilkan teks <track> pada pemutar audio; isinya hanya dapat diakses lewat JavaScript (textTracks). Agar siniar tetap aksesibel bagi pengguna Tuli, sediakan juga transkrip teks lengkap di halaman, misalnya di dalam <details> di bawah pemutar.

💡 Tips Performa (preload="metadata")

Gunakan preload="metadata" agar peramban hanya mengunduh informasi durasi dan metadata berkas (beberapa kilobyte), bukan mengunduh seluruh berkas audio puluhan megabyte sebelum pengguna menekan tombol Putar.

Latihan Praktik Mandiri

  1. Buat sebuah halaman daftar episode siniar menggunakan <figure>, <figcaption>, dan <audio controls preload="metadata">.
  2. Sertakan minimal dua <source> dengan atribut type MIME yang akurat dan satu tautan unduh fallback di dalam tag <audio>.
📚 Rujukan