Tag Audio HTML5 dan Fungsinya
Sejak HTML5 telah release ke pasaran, file dengan tipe audio pun dapat ditambahkan ke laman web dengan menggunakan tag audio pada HTML5. Sebelumya audio hanya bisa dimainkan pada laman web dengan menggunakan plug in seperti flash. Tag audio adalah inline elemen yang digunakan untuk embed file suara pada website. Tag audio adalah tag yang sangat berguna jika ingin menambahkan suara seperti lagu, rekaman interview, dan lain sebagainya pada halaman web.
Sintak: <audio><source src="sample.mp3" type="audio/mpeg"></audio>
Atribut: Variasi atribut yang dapat digunakan dengan tag audio adalah sebagai berikut:
Sebelum memahami lebih dalam materi tentang Tag Audio HTML5 dan Fungsinya, terlebih dahulu pelajari materi tentang: Atribut Translate HTML5 dan Fungsinya, Tag Video HTML5 dan Fungsinya, dan Operator Matematika HTML5 dan Fungsinya.
Sebagai pengembang web, penting untuk memahami berbagai elemen HTML5 agar dapat menggunakannya secara efektif. Salah satu elemen kunci dalam pengembangan web modern adalah tag <audio> HTML5. Dalam artikel ini, akan dibahas tentang tag audio HTML5 beserta fungsinya dalam pengembangan halaman web.
Pengenalan Tag Audio HTML5
Tag <audio> HTML5 memberikan cara sederhana untuk menyematkan file audio langsung ke dalam halaman web tanpa menggunakan plugin eksternal. Ini menggantikan pendekatan lama yang mengandalkan plugin seperti Adobe Flash atau Java untuk memutar file audio.
- controls: kontrol apa yang akan digunakan untuk ditampilkan bersama dengan audio player.
- autoplay: file audio akan segera diputar setelah melakukan load control.
- loop: file audio akan diulangi secara berurutan.
- src: sumber url dari file audio.
- muted: audio file akan dimatikan.
Baca Juga:
- 2 Contoh Program Penggunaan Anotasi Ruby pada Tag RT HTML5
- 2 Atribut Utama yang Digunakan pada Tag Ruby HTML5
- 3 Fungsi Utama Penggunaan Tag Summary pada HTML5
- Cara Memecah Kalimat dengan Tag WBR HTML5
Format yang mendukung
Tiga format seperti mp3, ogg, wav dapat didukung penggunaannya pada tag audio pada HTML5. Sedangkan bentuk dukungan setiap format pada browser berbeda diperlihatkan pada tabel 1 berikut ini:Tabel 1 Browser Support Audio
Penambahan Audio pada Halaman Website:
<!DOCTYPE html>
<html>
<body>
<p>
Contoh Audio
</p>
<audio controls>
<source
src="http://docs.google.com/uc?export=open&id=1gp39a0PqdAnW0uGtscVZaW41K28cwx95"
type="audio/mp3">
</audio>
</body>
</html>
Output:
Contoh Audio
- Atribut controls digunakan untuk menambah kontrol audio seperti play, pause, dan volume.
- Elemen source digunakan untuk menentukan file audio mana yang akan digunakan oleh browser, dengan File pertama yang dikenali sebagai format akan digunakan oleh browser.
Autoplay Audio pada Website:
Atribut autoplay akan digunakan untuk memutar file secara otomatis ketika URL dari website telah melakukan loading.
Atribut autoplay akan digunakan untuk memutar file secara otomatis ketika URL dari website telah melakukan loading.
<!DOCTYPE html>
<html>
<body>
<p>
Contoh Audio
</p>
<audio controls autoplay>
<source
src="..."
type="audio/mp3">
<source
src="test.ogg"
type="audio/ogg">
</audio>
</body>
</html>
Menambahkan Audio Mute pada Website:
Atribut mute digunakan untuk menentukan bahwa audio akan di-mute pada website.
Atribut mute digunakan untuk menentukan bahwa audio akan di-mute pada website.
<!DOCTYPE html>
<html>
<body>
<p>
Contoh Audio
</p>
<audio controls muted>
<source
src="..."
type="audio/mp3">
<source
src="test.ogg"
type="audio/ogg">
</audio>
</body>
</html>
Penambahan Audio Menggunakan Elemen Source:
Elemen source dapat digunakan untuk menambahkan file audio pada website. Atribut src digunakan untuk menentukan sumber dari alamat spesifik file.
Elemen source dapat digunakan untuk menambahkan file audio pada website. Atribut src digunakan untuk menentukan sumber dari alamat spesifik file.
<!DOCTYPE html>
<html>
<body>
<p>
Contoh Audio
</p>
<audio controls autoplay>
<source
src="..."
type="audio/mp3">
</audio>
</body>
</html>
Penambahan Audio dengan Multiple Source:
Ketika multiple source telah ditentukan maka browser dapat memutar source pertama dan kemudian melanjutkannya ke source kedua dan memutar file kedua tersebut.
<!DOCTYPE html>
<html>
<body>
<p>
Contoh Audio
</p>
<audio controls autoplay>
<source
src="...mp3"
type="audio/mp3">
<source
src="...ogg"
type="audio/ogg">
<source
src="...opus"
type="audio/ogg">
</audio>
</body>
</html>
Penambahan Audio dengan Menggunakan Tag Embed:
Penambahan file audio pada website menggunakan tag embed adalah sebuah teknik lama. Method ini tetap dapat digunakan tetapi kurang efisien dari pada metode terbaru yang menggunakan HTML5. Untuk dapat melakukannya user harus memiliki plugin seperti MIDI atau QuickTime karena tag embed membutuhkan plugin untuk dapat mendukung pemutaran file tersebut.
<!DOCTYPE html>
<html>
<body>
<p>
Contoh Audio
</p>
<embed
src="..."
width="200"
height="50"
autoplay="true"
loop="true">
</body>
</html>
Atribut Utama Tag Audio:
- src: Menunjukkan lokasi file audio. Ini bisa berupa URL atau path file lokal.
- controls: Menambahkan kontrol pemutaran ke pemutar audio, memudahkan pengguna untuk memainkan atau menghentikan audio.
- autoplay: Mengatur audio untuk diputar secara otomatis begitu halaman dimuat. Namun, sebagian besar browser modern mengharuskan tindakan pengguna sebelum memainkan audio otomatis untuk menghindari gangguan.
- loop: Mengatur audio agar diputar ulang secara terus-menerus.
Fungsi Tag Audio HTML5:
- Pemutaran Audio: Tag audio HTML5 memungkinkan pemutaran file audio tanpa perlu plugin eksternal, memberikan pengalaman yang lebih bersih dan konsisten.
- Kontrol Pengguna: Dengan atribut controls, pengguna dapat dengan mudah mengontrol pemutaran audio, termasuk memutar, menghentikan, dan mengatur volume.
- Dukungan Format Multi: Tag <audio> mendukung multiple tag <source>, memungkinkan pengembang untuk menyematkan file audio dalam format yang berbeda untuk memastikan dukungan browser yang luas.
- Responsif Terhadap Perangkat: Audio HTML5 secara otomatis merespons ukuran layar dan perangkat, sehingga memberikan tampilan yang baik di berbagai perangkat.
- Dukungan Aksesibilitas: Tag audio HTML5 memungkinkan integrasi yang lebih baik dengan teknologi bantu seperti pembaca layar, meningkatkan aksesibilitas situs web.
Tag audio HTML5 memiliki beberapa kelebihan yang membuatnya menjadi pilihan utama dalam menyematkan konten audio di halaman web modern. Berikut adalah beberapa kelebihannya:
- Tanpa Plugin Eksternal: Sebelum HTML5, pengguna harus mengandalkan plugin eksternal seperti Adobe Flash atau Java untuk memutar file audio. Dengan tag audio HTML5, tidak diperlukan plugin tambahan, mengurangi dependensi eksternal dan meningkatkan kecepatan dan keamanan halaman web.
- Dukungan Format yang Luas: Tag audio HTML5 mendukung berbagai format audio, termasuk MP3, Ogg, dan WAV. Ini memastikan bahwa pengembang dapat menyediakan opsi yang sesuai dengan preferensi dan kompatibilitas browser.
- Kontrol Pemutaran Terintegrasi: Atribut controls pada tag audio menyediakan kontrol pemutaran terintegrasi seperti play, pause, volume, dan seek, tanpa perlu menambahkan JavaScript tambahan. Ini memberikan pengalaman pengguna yang lebih baik.
- Responsif Terhadap Perangkat: Tag audio HTML5 dirancang untuk responsif terhadap perangkat, artinya ukuran dan tata letak pemutar audio akan menyesuaikan secara otomatis dengan ukuran layar dan perangkat pengguna.
- Aksesibilitas yang Ditingkatkan: Tag audio HTML5 mendukung aksesibilitas yang lebih baik. Penggunaan yang benar dari atribut dan struktur tag audio dapat membantu dalam integrasi dengan teknologi bantu seperti pembaca layar, memastikan bahwa konten audio dapat diakses oleh semua pengguna.
- Mudah diimplementasikan: Tag audio HTML5 mudah diimplementasikan dan dipahami. Dengan sintaks yang sederhana, pengembang dapat dengan cepat menyematkan file audio ke dalam halaman web tanpa harus menguasai keterampilan khusus.
- Dukungan Browser yang Luas: Sebagian besar browser modern mendukung tag audio HTML5, sehingga pengguna tidak perlu khawatir tentang kompatibilitas lintas browser.
- Integrasi dengan JavaScript: Tag audio dapat diintegrasikan dengan JavaScript untuk pengendalian pemutaran yang lebih lanjut, memberikan fleksibilitas tambahan untuk pengembang yang ingin menyesuaikan fungsi pemutar audio.
Dari kelebihan-kelebihan tersebut, tag audio HTML5 menjadi solusi yang efektif dan terjangkau untuk menyematkan konten audio dalam halaman web modern. Ini memberikan kontrol lebih besar kepada pengembang dan pengguna, sekaligus meningkatkan pengalaman web secara keseluruhan.
Dengan memahami tag audio HTML5 dan fungsinya, maka dapat memperkaya halaman web yang dibuat dengan konten audio tanpa mengandalkan solusi eksternal. Ini memberikan dasar yang kokoh untuk pembelajaran lebih lanjut dalam pengembangan web.
Referensi Tambahan:
- 8 Cara Deklarasi Tag Doctype pada HTML
- 11 Atribut Utama yang Digunakan pada Tag Anchor HTML
- Cara Mudah Membuat Teks Abbreviation Menggunakan Tag Abbr HTML
- Cara Membuat Singkatan Kata Menggunakan Tag Acronym pada HTML
- Cara Membuat Teks dengan Format Alamat Menggunakan Tag Address HTML
- 11 Atribut Utama untuk Membuat Applets pada HTML
- 10 Nilai Atribut Utama untuk Penggunaan Tag Area HTML
Artikel ini akan dibaca oleh: Taris Nur Adzhani, Thali'Ah Sa'Diyah Salsabil, Vicga Wandansari, Wahyuni Ambarwati, dan Yunita Ayu Pratiwi.
5 komentar untuk "Tag Audio HTML5 dan Fungsinya"
Hubungi admin melalui Wa : +62-896-2414-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
- Ikatlah Ilmu dengan Memostingkannya -
Apa fungsi tag audio pada html?
BalasHapusTag < audio > digunakan untuk menyematkan konten suara dalam dokumen, seperti musik atau aliran audio lainnya. Teks berada diantara tag < audio > dan tag < /audio >, yang hanya ditampilkan pada browser yang tidak mendukung elemen < audio >. Ada tiga format yang mendukung penggunaan tag audio yaitu: MP3, WAV, dan OGG.
HapusElemen < audio > pada HTML digunakan untuk menyematkan konten suara dalam dokumen html. Tag ini mungkin berisi satu atau lebih sumber audio, yang direpresentasikan menggunakan atribut src atau elemen < source >. Browser akan memiliki sumber mana yang paling sesuai, yang menjadi tujuan untuk media streaming.
HapusApa kelebihan HTML5 dalam hal media video dan audio?
BalasHapusFitur HTML5 mencakup dukungan audio dan vidoe asli tanpa memerlukan bantuan dari media Flash. Tag tersebut pada HTML5 membantu memudahkan untuk menambahkan media ke website. Pengembang web hanya perlu mengatur src untuk mengidentifikasi sumber media dan menyertakan atrbut kontrol sehingga pengguna dapat memutar dan menjeda media yang diputar tersebut.
Hapus