Artikel kali ini terinspirasi dari pembicaraan teman-teman di
grup Pojok Programmer
tentang link download palsu yang mengarahkan ke link iklan.
Sebagian halaman web menggunakan getaran untuk mengambil perhatian dari pengunjungnya,
terutama halaman web yang penuh dengan iklan.
Membaca komentar-komentar mereka membuat saya teratrik ingin tahu
cara membuat getaran di web.
Langsunga saja saya menuju ke Google dan memasukan kata kunci “js vibrate phone”
dan hasilnya ternya menggunakan HTML5 Vibration API.
Apa itu HTML5 Vibration API?
HTML5 Vibration API adalah API (Application Programming Interface) untuk membuat
getaran pada web yang bertujuan memberikan umpan balik pada kejadian tertentu.
Menurut penjelasan MDN (Mozilla Developer Network) getaran itu sendiri
didefinisikan sebagai pola dari gelombang pulsa on-off yang memiliki panjang
dalam bentuk integer. Panjang gelombang tersebut menentukan lama getarananya.
Pada contoh gelombang pulsa di atas, getaran akan mulai (on) selama 200 ms (milidetik).
Setelah itu diam selama 250 ms, kemudian lanjut lagi selama 1000 ms atau 1 detik.
Cara Menggunakan HTML5 Vibration API
HTML5 Vibration API menyediakan fungsi vibrate() untuk membuat getaran.
Bentuk sintaksnya seperti ini:
window.navigator.vibrate(pola);
Nilai paramter pola dapat kita isi dengan nilai panjang getarannya.
Misalnya kita ingin membuat getaran selama 1 detik:
window.navigator.vibrate(1000);
Lalu bagaiaman kalau membuat lebih dari satu kali getaran?
Gampang!
Kita tinggal membuat pola dari pulsa getarannya.
window.navigator.vibrate([1000, 500, 1000]);
Artinya gelombang akan dimulai selama 1000 ms (1 detik), kemudian berhenti
selama 500 ms. Setelah itu bergetar lagi selama 1000 ms.
Untuk menghentikan getaran, kita bisa memberikan nilai nol (0) kepada
fungsi vibrate().
window.navigator.vibrate(0);
Oke paham! Cukup sudah teorinya.
Mari kita bereksperimen…
Silahkan buat file HTML baru, dan simpan di direktori htdocs atau /var/www/html.
Kemudian isi dengan kode ini:
<!DOCTYPE html><html>
<head>
<title>Tutorial HTML5 Vibration API</title>
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<scripttype="text/javascript">
// fungsi ini akan kita panggil saat tombol diklik
function buatGetaran(pola){
var getaran =window.navigator.vibrate(pola);
// tampilkan hasilnya ke console
// kalau true berarti browser mendukung untuk membuat getaran
// tapi kalau false browser tidak mendukung
console.log(getaran);
}
</script>
</head>
<body>
<p>Coba klik tombol berikut:</p>
<buttononclick="buatGetaran(1000)">Bergetar!!!</button>
<buttononclick="buatGetaran([1000, 500, 1000])">Bergetar 2x!!!</button>
<buttononclick="buatGetaran([200, 500, 300, 100, 400])">Bergetar 3x!!!</button>
</body>
</html>
Kenapa harus simpan di htdocs, kan gak ada PHP-nya?
Karena nanti agar bisa kita coba melalui HP.
Percobaan di browser Desktop
Sebelum mencoba di HP, kita coba dulu di browser desktop (menggunakan google chrome).
Jangan lupa sambil membuka console javascript pada
inspect element.
Hasilnya true, berarti browser kita mendukung untuk membuat
getaran.
Tapi kok tidak terjadi getaran?
Ya iya lah, perangkat keras (hardware) komputer atau laptopnya tidak mendukung. 😄
Percobaan di Handphone
Percobaan saya lakukan dengan tethering WiFi dari HP ke Laptop, bisa juga sebaliknya.
Laptop sebagai server web, dan HP sebagai client atau pengunjung web.
Berarti kita harus tahu IP dari laptopnya, barulah kita buka melalui browser.
