10. Tutorial HTML MEMASANG AUDIO PADA HALAMAN HTML LENGKAP - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Tuesday, May 24, 2016

10. Tutorial HTML MEMASANG AUDIO PADA HALAMAN HTML LENGKAP

Hai semuaaa, karena pembahasan mengenai form sudah selesai, kali ini kita akan bahas bagaimana cara menempatkan audio pada halaman HTML.
Supaya halaman website kamu ada irama musiknya jadi bisa joget - joget gitu deh, kamu bisa menambahkan audio pada halaman web dengan menggunakan tag audio <audio></audio> .



Agar audio bisa terpasang di halaman HTML kita membutuhkan atribut "src" untuk mencari file audio yang dipasang. Cara penulisannya seperti ini:
<audio src="musik.mp3"> </audio>
Penulisan nya seperti biasa ya di dalam <body></body>

Naaah, supaya kita dapat memutar dan melakukan kontrol terhadap audio yang kita pasang kita gunakan atribut "controls" yang berfungsi untuk menampilkan tombol-tombol kontrol audio seperti: tombol play/stop, slider, volume,timer, dan lainnya. Jika atribut ini tidak ditulis, maka tombol-tombol kontrol tidak akan muncul.
Cara penulisannya seperti ini:
<audio src="musik.mp3" controls> </audio>

Tapi, jika kamu ingin audio otomatis memutar saat halaman dibuka, anda bisa menggunakan atribut "autoplay". Dengan menggunakan atribut ini audio yang terpasang pada halaman web akan secara otomatis memutar audio tanpa mengklik tombol play.

Cara penulisannya seperti ini:
<audio src="musik.mp3" controls autoplay> </audio>

Sebaiknya tetap menggunakan atribut controls meskipun sudah menggunakan atribut autoplay, karena jika tidak menggunakan atribut controls, audio tidak dapat dimatikan, kecuali halaman ditutup.

Agar audio yang diputar dapat memutar ulang secara otomatis kita bisa menggunakan atribut "loop"
Cara penulisannya seperti ini:
<audio src="lagu.mp3" controls loop> </audio>

Saat kamu sedang tidak ingin mendengarkan audio, anda bisa mengatur volume ke nol, tapi tag audio juga menyediakan atribut "muted" agar audio tidak terdengar namun tetap berjalan.
Cara penulisannnya seperti ini:
<audio src="lagu.mp3" controls autoplay muted> </audio>

Selain itu, tag <audio> juga menyediakan atribut "preload" yang fungsinya memrintahkan browser agar mendowload sebagian kecil file audio agar bisa diputar secara terus menerus(seperti buffering lah). Nah, atribut preload ini terdapat tiga type, yaitu auto, meta, dan none.
seperti ini penulisannnya:
<audio src="musik.mp3" controls preload="meta"> </audio>
auto akan secara otomatis mendownload seluruh file saat halaman dibuka, untuk menghemat bandwidth tidak disarankan menggunakan preload ini.
meta akan mendownload sebagian kecil file, cukup untuk mengetahui ukuran file, dan memutuskan apakah audio mau diputar atau tidak.
none tidak akan mendownload file jika tombol play belum di klik.
penggunaan atribut preload ini hanya saran untuk web browser, jika tidak ditulis juga tidak berpengaruh.

Berikut contoh penggunaan tag <audio>
Pastikan anda telah menempatkan file audio yang inginn dipasang berada dalam folder yang sama dengan file html yang anda buat. dibawah ini saya menggunakan file jrocks-Ceria.mp3.

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Belajar memasang audio di HTML</title>
</head>
<body>
<h1>Memasang audio di halaman web</h1>
<audio src="jrocks-Ceria.mp3" controls autoplay muted ></audio>
</body>
</html>
seperti ini hasilnya:

Karena kita memasang atribut muted, jadi saat halaman terbuka tidak akan muncul suara. Jika kita menginginkannya kita klik aja tanda speakernya.
Ok sekian dulu pembahasan kali ini, selanjutnya kita akan membahas cara memasukkan video pada halaman web.
Tetap semangat yaaaa apalagi bagi yang kerja nya lembur terus#HMMM

1 comment: