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.