Audio

Menambahkan Audio ke Halaman HTML

Untuk menambahkan audio ke halaman web, Anda perlu menggunakan tag <audio>. Berikut contohnya:

<audio controls>
 <source src="nama-audio.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio>
  • <audio>: Ini adalah tag yang digunakan untuk menampilkan pemutar audio.
  • controls: Atribut ini menambahkan kontrol pemutar audio seperti play, pause, dan volume.
  • <source>: Ini adalah tag yang digunakan untuk menentukan sumber audio dan jenis file audio yang digunakan.
    • src: Ini adalah atribut yang harus diisi dengan URL atau path ke file audio Anda.
    • type: Ini adalah atribut yang mendefinisikan jenis file audio, misalnya, audio/mpeg untuk file MP3.

Fallback Text

Tambahkan teks yang akan muncul jika browser pengguna tidak mendukung elemen audio. Ini ditampilkan di antara tag <audio> seperti yang terlihat di contoh di atas.

Menambahkan Beberapa Sumber Audio

Untuk memastikan dukungan lintas browser, Anda dapat menambahkan beberapa sumber audio dengan format yang berbeda, seperti MP3 dan Ogg. Browser akan memilih format yang didukung.

<audio controls>
 <source src="nama-audio.mp3" type="audio/mpeg">
 <source src="nama-audio.ogg" type="audio/ogg">
 Your browser does not support the audio element.
</audio>

Mengontrol Tampilan Pemutar Audio

Anda dapat menyesuaikan tampilan pemutar audio dengan CSS sesuai keinginan Anda.

/* Contoh CSS untuk pemutar audio */
audio {
 width: 100%;
 max-width: 400px;
}

Ini akan membuat pemutar audio memiliki lebar maksimum 400px.

Dengan mengikuti langkah-langkah ini, Anda dapat menambahkan audio ke halaman HTML Anda dengan mudah. Pastikan Anda memiliki file audio yang tersedia dan menyesuaikan atribut src pada tag <source> dengan path ke file audio yang benar.

PREVIOUS
NEXT