Audio dan Video

02 Jun 2025

Panduan lengkap tentang penggunaan audio dan video dalam pengembangan web.

1. Pengertian Audio dan Video

Audio

Audio dalam web digunakan untuk memutar file suara seperti musik, podcast, atau rekaman suara. Elemen HTML <audio> memudahkan penyematan file audio pada halaman web.

Video

Video dalam web digunakan untuk menampilkan file video, seperti tutorial, presentasi, atau film. Elemen HTML <video> mendukung pemutaran video dengan kontrol pemutaran yang lengkap.

2. Elemen Audio

a. Struktur Dasar Audio

<audio controls>
  <source src="audio/contoh.mp3" type="audio/mpeg">
  Browser Anda tidak mendukung audio tag.
</audio>

controls: Menampilkan kontrol pemutaran (play, pause, volume).
source: Menentukan file audio yang akan diputar.
type: Menentukan tipe file audio, misalnya audio/mpeg atau audio/ogg.

3. Elemen Video

a. Struktur Dasar Video

<video width="640" height="360" controls>
  <source src="video/contoh.mp4" type="video/mp4">
  Browser Anda tidak mendukung video tag.
</video>

width & height: Mengatur ukuran video.
controls: Menampilkan kontrol pemutaran.
source: Menentukan file video yang akan diputar.
type: Menentukan tipe file video, misalnya video/mp4 atau video/webm.

4. Atribut Penting

Atribut	Audio	Video	Deskripsi
`controls`	✅	✅	Menampilkan kontrol pemutaran.
`autoplay`	✅	✅	Memulai pemutaran secara otomatis.
`loop`	✅	✅	Memutar ulang setelah selesai.
`muted`	✅	✅	Memulai pemutaran dalam keadaan tanpa suara.
`poster`	❌	✅	Menampilkan gambar poster sebelum video diputar.
`preload`	✅	✅	Mengontrol apakah file dimuat saat halaman dibuka.

5. Contoh Penggunaan

a. Audio Otomatis

<audio src="audio/music.mp3" autoplay loop></audio>

b. Video dengan Poster

<video width="640" height="360" controls poster="images/poster.jpg">
  <source src="video/tutorial.mp4" type="video/mp4">
</video>

6. Format File Audio dan Video

Media	Format Populer
Audio	MP3, OGG, WAV
Video	MP4, WebM, OGG, AVI

7. Kesimpulan

Audio dan video dapat diputar di browser dengan mudah menggunakan tag HTML <audio> dan <video>. Gunakan atribut controls, autoplay, loop, muted, dan lainnya untuk menyesuaikan perilaku media. Pilih format file yang didukung banyak browser, seperti MP3 untuk audio dan MP4 untuk video.