author Ahmad Muhardian

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.

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:

Baca Juga ini

Menggambar Objek dengan Perulangan dan Fungsi Random di HTML5 Canvas

Menggambar Objek dengan Perulangan dan Fungsi Random di HTML5 Canvas

Pada artikel pengenalan HTML5 Canvas sebelumnya, kita sudah belajar cara menggamabar objek-objek dasar seperti titik, garis, persegi, lingkaran, dan segitiga. Obejek digambar hanya sekali saja. Bagaiaman kalau kita ingin menggambar banyak objek dan digambar secara acak? Untuk menjawab pertanyaan ini, kita harus menggunakan perulangan dan fungsi random(). Lebih jelasnya, mari kita bahas… Menggambar Objek dengan PerulanganPada contoh di artikel sebelumnya, kita sudah pernah menggamabar persegi dua kali. <script type="text/javascript"> var canvas = document.

Mengenal HTML5 Canvas untuk Pemrograman Grafis dan Game

Mengenal HTML5 Canvas untuk Pemrograman Grafis dan Game

Sebelum kedatangan HTML5, Game dan elemen multimedia lainnya disajikan dalam browser menggunakan Flash. Banyak game berbasis Flash yang bisa dimainkan melalui browser. Bahkan Flash juga digunakan untuk memutar video. Seingat saya dulu…tanpa Flash Player, kita tidak bisa memutar video di Youtube. Namun semuanya berubah setelah kedatangan HTML5… 1 HTML5 membawa banyak elemen baru yang menggantikan tugas Flash dalam browser. Salah satunya adalah canvas.

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman

Validasi data itu penting! Mengapa? Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya website kita menjadi error. Dampak terburuknya: Website kita bisa diambil alih atau di-hack. Ngeri kan. Karena itu.. Jangan percaya 100% dengan data yang diinputkan user. Bisa saja itu script jahat. Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu dikirim ke server. Dulu.. validasi data di sisi client dilakukan dengan Javascript.

15 Tag HTML yang tidak Memiliki Pasangan Penutup

15 Tag HTML yang tidak Memiliki Pasangan Penutup

Sebuah elemen dalam HTML terdiri dari tag pembuka dan tag penutup. Namun, ada juga yang tidak memiliki tag penutup. Kasihan juga ya, hehe 😄 Meskipun demikian, elemen ini tetap valid dan dapat dibaca browser. Elemen yang tidak memiliki tag penutup ini juga disebut void element, karena tidak memiliki isi. Apa saja tag-tag yang tidak memiliki penutup itu? mari kita simak… 1. Tag <area>Tag <area> fungsinya untuk mendefinisikan area pada image map.

Cara Membuat Halaman Github untuk Repositori

Cara Membuat Halaman Github untuk Repositori

Pada tulisan sebelumnya, saya pernah membahas tentang cara membuat halaman Github untuk profil individu dan organisasi. Nah, kali ini kita akan membuat halaman github untuk proyek atau repositori. Jadi sebenarnya, setiap proyek atau respositori di Github itu bisa dijadikan halaman Github (Github Pages). Pastikan di dalam proyek berisi file web statis seperti HTML, CSS, dan Javascript. Membuat repositoriBuatlah repositori dengan nama apa saja, kemudian di dalamnya berisi file web statis. Setelah itu, upload ke github.

4 Cara Menulis Kode Javascript pada HTML yang Wajib Kamu Ketahui

4 Cara Menulis Kode Javascript pada HTML yang Wajib Kamu Ketahui

Baru belajar Javascript? ..dan masih bingung dengan cara menulis Javascript di HTML? Tenang! Saya akan menjelaskannya. Ada 4 cara menulis kode Javascript pada HTML. Dari keempat cara ini, ada yang biasa dan sering digunakan.. ..ada juga yang ‘aneh’, jarang digunakan sih tapi masih work! Apa saja keempat cara itu? Mari kita bahas: googletag.cmd.push(function () { googletag.display('div-gpt-ad-multibanner1'); }); 1. Menulis Javascript pada Tag <script>Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang digunakan.