Selamat datang kembali! Pada artikel sebelumnya, kita telah membahas tentang tag video pada HTML5. Namun, sebuah website tidak hanya terdiri dari teks dan gambar saja. Ternyata, video dan audio juga dapat menjadi bagian dari konten website yang menarik. Karena itu, kita akan membahas lebih lanjut mengenai tag audio pada HTML5 dalam artikel kali ini. Jadi, mari kita segera mulai Implementasi Media Video dan Audio pada HTML5 Part 2.
Tag Audio HTML5
Sebelum HTML5 hadir, audio di HTML memerlukan program eksternal seperti Flash Player. Namun kini, HTML sudah mempunyai tag sendiri yang disebut <audio>. Tag audio ini berfungsi untuk menambahkan audio pada halaman web sehingga dapat diputar dan didengarkan oleh pengunjung.
Dengan tag audio, kita dapat membuat pemutar audio di dalam halaman web dengan mudah. Selanjutnya, kita dapat menentukan file audio yang akan diputar dengan menggunakan tag <source>.
Berikut ini contoh implementasi tag <audio> pada HTML:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Pada contoh di atas, tag audio dilengkapi dengan atribut “controls” yang memungkinkan pengguna untuk mengontrol pemutaran audio, seperti play, pause, dan volume. Kemudian, terdapat dua tag <source> yang merepresentasikan dua format audio yang berbeda, yaitu mp3 dan ogg. Jika browser tidak mendukung kedua format tersebut, maka pesan “Your browser does not support the audio element” akan muncul.
Path Audio HTML5
Mari kita berkenalan dengan tag <audio> pada HTML5! Dalam pengembangan website modern, tak hanya teks dan gambar yang menjadi konten utama. Namun, audio pun turut menjadi bagian penting. Tag <audio> sendiri hadir sebagai tag khusus yang memungkinkan kita menyisipkan file audio pada halaman web dan memutar suaranya.
Untuk menggunakan tag ini, kita perlu menentukan file audio yang akan diputar menggunakan tag <source>. Jika file audio berada dalam folder yang berbeda dengan file HTML, maka kita perlu menentukan alamat folder atau path-nya, mirip seperti penggunaan tag <video>.
Tentunya, jika kita ingin mengambil audio dari web, kita juga dapat memasukkan URL audio tersebut ke dalam atribut src. Misalnya:
<audio controls>
<source src="https://file-examples.com/storage/fe9278ad7f642dbd39ac5c9/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>Format Audio HTML5
HTML5 memiliki beberapa format audio yang didukung, sehingga memudahkan kita untuk menyesuaikan format audio yang akan digunakan di website. Berikut adalah beberapa format audio yang didukung oleh HTML5:
| 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 |
Dengan mengetahui format audio yang didukung oleh HTML5, kita dapat memilih format audio yang tepat dan sesuai dengan kebutuhan website.
Atribut Audio HTML5
Tag <audio> pada HTML5 memiliki sejumlah atribut yang sangat berguna. Diantaranya, atribut autoplay yang dapat memutar audio secara otomatis saat halaman website dimuat. Ada juga atribut loop yang akan membuat audio terus berputar secara berulang-ulang. Atribut controls digunakan untuk menampilkan kontrol audio standar seperti play, pause, dan volume. Selain itu, atribut preload dapat mengatur bagaimana audio akan diproses saat halaman website dimuat, seperti nilai “auto” yang akan memuat audio secara otomatis atau nilai “none” yang tidak memuat audio sampai kontrol play diklik. Semua atribut ini dapat disesuaikan dengan kebutuhan dan preferensi pengguna.
| 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 |
Dalam pembuatan halaman web, kita dapat menambahkan konten multimedia seperti video dan audio menggunakan tag <video> dan <audio> pada HTML5. Tag <video> digunakan untuk menampilkan video pada halaman web, sementara tag <audio> digunakan untuk menampilkan file audio. Kedua tag tersebut memiliki atribut-atribut yang berfungsi untuk mengatur tampilan dan perilaku media yang ditampilkan. Dalam penentuan sumber media, kita dapat menggunakan atribut src dan <source> untuk mendukung beberapa format media yang berbeda. Dengan memahami konsep dasar dan implementasi tag tersebut, kita dapat meningkatkan kualitas multimedia pada website dan memberikan pengalaman yang lebih baik bagi pengunjung.
