Skip to main content

A.3.11. Audio Dan Video

A.3.11.1. Audio​

Tag <audio> digunakan untuk menambahkan file audio ke dalam halaman web. Misalnya, temen-temen ingin menampilkan musik, podcast, atau efek suara lainnya, bisa menggunakan tag ini.

Seperti biasa, silahkan temen-temen siapkan satu buah file HTML baru lalu temen-temen bisa mengetikan atau meng-copy code di bawah:

<audio controls>
  <source src="assets/deja-vu.mp3" type="audio/mpeg" />
  Browser kamu tidak mendukung tag audio.
</audio>

Buat folder assets untuk menyimpan semua asset berupa gambar, video ataupun audio yang akan kita sisipkan kedalam website kita. Oiya untuk sound nya bebas ya, atau temen-temen bisa cari di sini: https://www.myinstants.com/en/search/?name=meme.

Pada kode diatas terdapat beberapa attribut dan point yang harus diperhatikan:

  • controls: Menampilkan kontrol dasar seperti play, pause, dan volume, yang memudahkan pengguna untuk mengontrol audio.
  • source: Menentukan file audio yang akan diputar, temen-temen bisa menyediakan beberapa format file agar kompatibel dengan berbagai browser.
  • Fallback text: Teks ini akan muncul jika browser tidak mendukung tag <audio>. Ini penting sebagai alternatif informasi bagi pengguna.

Nah sekarang, coba buka file HTML nya di web browser masing-masing ya. Hasil dari kode diatas akan menampilkan output:

Output

Tampilan yang di hasilkan pada web browser akan berbeda-beda ya temen-temen, menyesuaikan dengan browser nya masing-masing.

A.3.11.2. Video​

Untuk menampilkan video di halaman web, temen-temen bisa menggunakan tag <video>. Ini memungkinkan temen-temen untuk menambahkan video tanpa perlu third-party library atau pustaka tambahan.

Temen-temen bisa buat file baru atau bisa juga menaruh kode ini pada file yang sudah di buat sebelumnya ya.

<video width="320" height="240" controls>
  <source src="assets/why-are-you-crying.mp4" type="video/mp4" />
  Browser kamu tidak mendukung tag video.
</video>

Simpan video yang sudah disiapkan ke dalam folder assets yang telah kita buat sebelumnya. Jika temen-temen belum memiliki video-nya, temen-temen bisa cari disini ya: https://vlipsy.com/search/meme.

Kode diatas juga memiliki beberapa attribut dan point yang perlu diperhatikan. diantaranya:

  • width dan height: Menentukan ukuran tampilan video di halaman web. Temen-temen bisa sesuaikan ukurannya sesuai kebutuhan.
  • controls: Menyediakan kontrol seperti play, pause, volume, dan full screen bagi pengguna.
  • source: Sama seperti pada audio, di sini temen-temen menyertakan file video dengan format yang berbeda untuk memastikan kompatibilitas.
  • Fallback text: Ini akan muncul jika browser tidak mendukung tag <video>, sehingga pengguna tetap mendapatkan informasi.

Temen-temen bisa buka di web browser untuk melihat hasilnya ya.

Output

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/a-html/chapter-A.3-tags-pada-html/chapter-A.3.11-audio-dan-video