Implementasi Media Video dan Audio pada HTML5 Part 2

Pada artikel sebelumnya, kita telah mempelajari tentang tag video pada HTML5. Ternyata, konten dalam suatu website tidak hanya berisi teks dan gambar saja. Melainkan juga terdapat video dan audio. Karena tag video sudah pernah kita jelaskan, sekarang giliran tag audio yang akan kita pelajari. Berikut merupakan implementasi video dan audio pada HTML5 Part 2.

Tag Audio HTML5

Sebelum HTML5 muncul, audio di HTML diimbuhi program eksternal, contohnya flash player. Namun seiring berjalannya waktu, kini HTML sudah mempunyai tag sendiri yaitu <audio>. Tag audio adalah tag yang berfungsi untuk menunjukkan sebuah sound (audio) yang dapat disisipkan pada halaman web dan diputar untuk didengarkan.

Singkatnya, Tag audio merupakan tag untuk membuat audio player. Kemudian kita bisa menentukan file audio yang akan diputar dengan tag <source>.

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contoh Audio di HTML</title>
</head>
<body>
  <h1>Contoh Audio di HTML</h1>
  <audio controls>
    <source src="yntkts.mp3" type="audio/mpeg">
    2022, Your Browser not supported an audio?
  </audio>
</body>
</html>

Path Audio HTML5

Pada contoh di atas, nama audio yang ditampilkan ditulis secara langsung. Ini karena audionya berada dalam satu folder dengan file HTML. Jika file video tersebut tersimpan di lokasi folder yang berbeda, maka kalian perlu menulis alamat folder atau path-nya. Kurang lebih sama dengan penggunaan tag <video>. Misalnya, saya meletakkan videonya di dalam folder audio_web. Maka, alamat pathnya adalah:

<audio>
<source src="audio_web/nama_audio.mp3">
</audio>

Jika kalian mengambil audionya dari online web. Kalian juga dapat mengisi nilai atribut src dengan url audio. Contohnya:

<audio>
<source src="www.audio.com/nama-audio.mp3">
</audio>

Format Audio HTML5

Terdapat beberapa format audio pada HTML5 yang dapat digunakan sebagai berikut:

Format	Keterangan	Ekstensi	Tipe MIME
MP3	MP3 adalah MPEG-1 atau MPEG-2 Audio Layer III, yaitu format audio paling terkenal yang memakai format lossy data compression.	.mp3	audio/mp3
Ogg Vorbis	Format free, merupakan open standar penyaji kualitas audio yang lebih baik dari MP3.	.ogg	audio/ogg
WAV	Merupakan format original untuk raw digital audio. Format WAV tidak mengkompress file nya sehingga ukurannya lebih besar dari format-format yang lain.	.wav	audio/wav

Atribut Audio HTML5

Sama seperti tag <video>, tag audio juga memiliki beberapa atribut yang memiliki bermacam-macam fungsi sebagai berikut:

Nama Atribut	Nilai	Fungsi
controls	true / false	Mengaktifkan tombol control seperti tombol pause, play, stop, volume, dan scroll). true = mengaktifkan tombol control false = tombol control tidak diaktifkan
autoplay	true / false	Memutar audio pada halaman secara otomatis. true = memutar audio secara otomatis false = tidak memutar audio secara otomatis
loop	true / false	Merepeat atau mengulang pemutaran audio secara terus menerus. true = mengulang pemutaran video false = video diputar sekali
muted	true / false	Mensenyapkan audio pada halaman. true = audio disenyapkan false = audio bersuara

Cara penulisan atribut tag <audio> masih sama dengan tag <video>. Jika atribut bernilai true, maka dapat ditulis dengan dua cara berikut:

<audio controls="true">
<source src="audio.mp3" />
</audio>

Atau

<audio controls>
<source src="audio.mp3" />
</audio>

Selain itu, jika atribut bernilai false dapat ditulis dengan cara ini:

<audio muted="false">
<source src="audio.mp3" />
</audio>

Atau

<audio>
<source src="audio.mp3" />
</audio>

Setelah membaca semua materi ini, maka kalian dapat mengerti apa itu tag audio pada HTML5. Singkatnya, tag audio berfungsi untuk menunjukkan sebuah sound (audio) yang dapat kita masukkan dalam halaman website. Penggunaannya juga hampir sama dengan tag video.

Tag Audio HTML5

Path Audio HTML5

Format Audio HTML5

Atribut Audio HTML5

Related items

Memahami 3 Jenis Api Model pada HTML5

Memahami 3 Api Model pada HTML5 Part 2

Memahami 3 Api Model pada HTML5 Part 3