Mengenal HTML5 Vibration API untuk Membuat Getaran di HP

HTML5 Vibration API

Artikel kali ini terinspirasi dari pembicaraan teman-teman di grup Pojok Programmer tentang link download palsu yang mengarahkan ke link iklan.

Diskusi getaran di web

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.

Googling tentang 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.

Contoh Gelombang Pulsa Getearan

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>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="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>
    <button onclick="buatGetaran(1000)">Bergetar!!!</button>

    <button onclick="buatGetaran([1000, 500, 1000])">Bergetar 2x!!!</button>

    <button onclick="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.