jika dalam tutorial sebelumnya kita telah membahas mengenai cara menambahkan form di HTML, nah dalam tutorial ini kita akan membahas mengenai cara menambahkan audio dengan menggunakan HTML5.
jika sebelumnya kita mengenal istilah flash player yang digunakan untuk menampilkan audio ataupun video di dalam browser, nah saat ini anda dapat memanfaatkan fitur yang diberikan oleh HTML5 yang dapat menambahkan audio secara langsung ke halaman web yang anda buat, baik kita akan bahas lebih lanjut ditutorial kali ini :
Browser yang mensupport
untuk fitur penambahan audio di HTML 5 ini bisa anda gunakan di beberapa browser yang telah di support oleh HTML 5, antara lain :
nah terlihat hampir seluruh browser telah mensupport fitur yang diberikan HTML 5
Skrip dasar
nah untuk menambahkan audio dengan menggunakan HTML5 anda dapat menuliskan skrip sederhana di bawah ini :
<audio>
<source src="nama_audio.mp3" type="audio/mpeg">
Browser Anda tidak support Tag Audio
</audio>terlihat di skrip atas terdapat 2 tag yaitu tag audio dan tag souce, penjelasannya adalah sebagai berikut :
- tag audio merupakan deklarasi yang digunakan agar browser mengetahui bahwa kita akan menambahkan audio di halaman web yang kita buat.
- tag source digunakan untuk menambahkan audio yang akan ditampilkan, dalam tag ini terdapat attribute src dan type, attribute src digunakan untuk menuliskan nama file audio yang akan ditampilkan dan attribute type digunakan untuk menset tipe file audio yang akan di tampilkan.
- “Browser Anda tidak support Tag Audio” adalah text yang ditampilkan di browser, ketika browser yang anda gunakan tidak mensupport tag audio.
untuk attribute type anda dapat mengisikan value seperti dibawah ini :
| Format File | Value Attribute |
| Mp3 | audio/mpeg |
| Wav | audio/wav |
| Oog | audio/ogg |
jadi anda dapat menentukan ingin menggunakan file audio dengan format file apa ? Mp3, Wav, ataupun Oog nanti nilai di attribute type tinggal menyesuaikan bagaimana mudah kan ???
Attribute Lain Tag Audio
tag audio juga memiliki beberapa attribute yang dapat anda gunakan untuk menambahkan fitur dari audio yang anda tambahkan di halaman web anda, attributenya antara lain adalah :
- autoplay berfungsi agar audio otomatis di play ketika audio siap untuk dimainkan (ketika halaman telah diload semisal)
- controls berfungsi menampilkan control pada audio semisal tombol play,pause,volume, dll.
- loop berfungsi agar audio dimainkan berulang-ulang
- muted berfungsi jika anda ingin audionya di mute
- preload (none, metadata, dan auto) berfungsi agar audionya dipersiapkan(buffering) setelah dibagian halaman web berhasil di load
Contoh Skrip
agar lebih memahami kita akan buat skrip sederhana yang akan kita gunakan untuk menampilkan audio dengan HTML5
<!DOCTYPE html>
<html>
<head>
<title>Form HTML</title>
</head>
<body>
<audio controls>
<source src="hujan_turun.mp3" type="audio/mpeg">
Browser Anda tidak support Tag Audio
</audio>
</body>
</html>semisal saya simpan dengan nama menambahkan_audio.html
Skrip diatas saya akan menambahkan sebuah file mp3 dengan nama hujan_turun.mp3 dimana saya letakkan satu folder dengan file html ini :
nah setelah itu silahkan buka di browser maka hasilnya adalah seperti berikut ini :
audio akan di putar di browser dengan tampilkan seperti ini, terlihat ada control seperti play, volume dll.
Bagaimana mudah kan ??? sekian dulu, pembahasan mengenai cara menambahkan audio dengan menggunakan HTML 5.
sampai jumpa di tutorial warung belajar lainnya.