Audio HTML

Saat membuat halaman HTML kadang kita perlu menambahkan audio sebagai pendukung konten jenis lain, entah itu audio musik, poadcast dan lainnya.

Untuk memasukkan audio ke HTML, kita perlu menggunakan tag khusus, kita tidak bisa menulis langsung path tanpa tag ini.

Lantas, bagaimana cara menambahkannya? Format audio apa saja yang didukung? atribut apa saja yang tersedia?

Mari kita pelajari lebih lanjut.

1. Cara Menambahkan Audio ke HTML
2. Format Audio yang Didukung
3. Atribut Audio
   1. muted
   2. autoplay
   3. controls
   4. loop
4. Menyembunyikan Kontrol Pemutar Audio

Cara Menambahkan Audio ke HTML

Untuk menambahkan file media audio, kita bisa menggunakan tag <audio>, di dalam tag ini kita perlu menulis tag <source> dengan atribut src yang merujuk ke file audio yang ingin dimasukkan.

Kita bisa menambahkan lebih dari satu tag <source> untuk menyematkan file audio dengan format yang berbeda, sehingga browser bisa menggunakan file audio yang lain jika salah satu format tidak didukung.

Di akhir tag penutup <audio> kita bisa menulis pesan untuk pengguna yang masih menggunakan browser lama yang tidak mendukung elemen audio.

Contoh:

<audio controls>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
  <source src="lagu-balonku.ogg" type="audio/ogg" />
  <source src="lagu-balonku.wav" type="audio/wav" />
  Ops! Browser Anda tidak mendukung audio.
</audio>

Hasil:

Format Audio yang Didukung

Ada banyak format audio yang bisa kita gunakan saat ini, tapi tidak semuanya didukung oleh browser.

Berikut daftar format audio yang paling sering digunakan dan didukung oleh browser populer seperti Chrome, Edge, Firefox, Safari, dan Opera:

Khusus untuk Safari, saat artikel ini ditulis belum mendukung format OGG.

Atribut Audio

Tag <audio> memiliki beberapa atribut khusus yang memungkinkan kita mengontrol perilaku pemutaran audio.

Sebagian besar memiliki fungsi yang mirip dengan atribut tag <video> yang sudah kita bahas sebelumnya.

Semua atribut yang akan kita bahas di sini membutuhkan nilai boolean.

Untuk menggunakannya kita hanya perlu menulis nama atribut tanpa nilai atau dengan nilai true, sedangkan untuk menonaktifkannya kita harus menghapus atribut tersebut.

Mari kita pelajari satu per satu.

muted

Atribut muted berfungsi untuk menentukan apakah suara audio akan dibungkam (mute) atau tidak.

Meskipun atribut ini digunakan, pengguna nantinya tetap bisa mengatur volume audio sesuai keinginan melalui kontrol pemutar audio.

Contoh:

<audio muted>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

autoplay

Atribut autoplay berfungsi untuk menentukan apakah audio akan diputar secara otomatis atau tidak. Gunakan atribut ini dengan muted agar tidak mengganggu pengguna.

Coba bayangka, apa jadinya jika kita berselancar di internet kemudian membuka situs yang memutar audio secara otomatis.

Menjengkelkan bukan?, apalagi jika suara audio yang digunakan cukup mengganggu.

Oleh karena itu, atribut ini tidak bekerja di Google Chrome meskipun kita sudah menggunakan atribut muted, tapi di Firefox bekerja dengan baik.

Contoh:

<audio autoplay>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

controls

Atribut controls berfungsi untuk menentukan apakah kita ingin menampilkan pengontrol audio atau tidak, termasuk tombol mulai/jeda, voulme dan lainnya.

Contoh:

<audio controls>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

loop

Atribut loop berfungsi untuk menentukan apakah audio akan diputar secara berulang-ulang atau tidak.

Jadi, ketika berakhir, audio tersebut akan diputar ulang secara otomatis.

<audio loop>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

Menyembunyikan Kontrol Pemutar Audio

Ketika kita menggunakan musik atau audio sebagai suara latar belakang halaman HTML, kita biasanya tidak memerlukan kontrol pemutar audio.

Untuk menghilangkan kontrol pemutar audio, kita bisa menggunakan atribut hidden atau cukup hapus atribut controls (tanpa hidden).

Contoh:

<audio hidden>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

<!-- atau -->

<audio>
  <source src="lagu-balonku.mp3" type="audio/mpeg" />
</audio>

Menyembunyikan kontrol pemutar autio berarti kita juga perlu menyematkan atribut autoplay, agar audio diputar secara otomatis.

Tapi, di Firefox kita juga perlu menggunakan atribut muted agar autoplay berfungsi, di Chrome ini tidak berfungsi sama sekali meskipun kedua atribut sudah disematkan.

Itu artinya, kita tetap membutuhkan kontrol pemutar audio setidaknya sekali untuk membantu pengguna mengatur volume suara.

Memutar audio secara otomatis tanpa intervensi penggunaa sebetulnya jarang dilakukan, bahkan situs penyedia musik seperti Spotify, Soundcloud, dan yang lainnya selalu menampilkan pengontrol audio.

Memutar audio sebagai latar belakang halaman web adalah gaya kuno, apalagi jika halaman web yang kita buat tidak berhubungan dengan musik dan tidak dibekali dengan pengotrol audio.

Jadi, sebisa mungkin hindari menyembunyikan kontrol pemutar audio, jika Anda tidak suka dengan tampilannya, buat sendiri menggunakan JavaScript.

Tetap tampilkan pengontrol audio, untuk memberikan pengalaman pengguna yang baik.