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.

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.

Percobaan hasil output getaran

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.

Percobaan Getaran di HP

Coba klik tombolnya!

Live Demo bisa dicek di link ini: https://goo.gl/8SPWt8 atau scan QR Code berikut:

QR Code Live Demo

Apakah terjadi getaran atau tidak?

Kalau tidak, berarti browser-nya tidak mendukung. Coba gunakan Google Chrome versi terbaru.

Berikut ini daftar versi browser yang mendukung:

Daftar versi browser yang mendukung getaran

Sumber: developer.mozilla.org

Ide Eksperimen Selanjutnya

  • Buat getaran kalau gagal login.
  • Integrasikan dengan GPS, misal buat getaran saat berada di lokasi tertentu.
  • Buat getaran berdasarkan gelombang audio.
  • Terapkan di Game, misal buat getaran saat terjadi benturan dalam Game.

Ada ide lagi?

Tambahkan di komentar!

Akhir Kata…

Menyenangkan bukan bermain HTML5 Vibration API…😄 Selanjutnya silahkan lakukan eksperimen sendiri yang lebih kreatif dan keren.

Terima kasih sudah menyimak artikel ini sampai akhir.

Referensi: