Belajar HTML Part 30 Cara Menambahkan Audio Menggunakan HTML 5

Posted on Posted in Tutorial HTML

Selamat datang lagi di tutorial warung belajar, 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 :

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

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 😀
 

Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box

Leave a Reply

Your email address will not be published. Required fields are marked *