Postingan lainnya
Mengenal HTML 5 Vibration API
Hey semuanya, dikesempatan kali ini saya akan sharing dengan teman teman semua tentang HTML 5 Vibration API , Apa sih itu HTML 5 Vibration API ?
HTML 5 Vibration API adalah API (Application Programming Interface) untuk membuat sebuah getaran pada web / aplikasi yang bertujuan memberikan feedback pada suatu kejadian tertentu seperti pada saat ada notifikasi pesan, berhasil upload data, ada error dan lainnya.
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.
Dari pada panjang lebar jadi lebih penasaran langsung ke poinnya aja, bagaimana sih cara menggunakannya gan ?
cara menggunakannya cukup simple, HTML 5 Vibration sudah menyediakan fungsi vibrate() untuk membuat sebuah getaran, dapat dilihat pada code dibawah ini :
window.navigator.vibrate(1000)
artinya getaran glombang (bukan gempa bumi) akan dimulai selama 1000 ms lamanya setelah itu tidak ada getaran.
lalu bagaimana sih caranya buat beberapa kali getaran ?
Ayoo Gimana ? (bencada), caranya cukup simple kita tinggal buat polanya seperti kode dibawah ini :
window.navigator.vibrate([1000,400,1000])
maksudnya getaran akan dimulai selamat 1000ms setelah itu akan berhenti bergetar selama 400ms setelah itu akan bergetar lagi selama 1000ms. Gimana sudah paham nggak ? .
gimana cara mengentikan getarannya gan ?
caranya berikan (0) pada polanya, dapat dilihat pada code dibawah ini:
window.navigator.vibrate(0)
artinya jika diberi nilai (value) 0 pada polanya maka getaran akan berhenti.
bagaimana gan sudah mengerti nggak ?
kalau sudah yuk coba code berikut ini gan : file index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>Klik Tombok Berikut</p>
<button onclick="bergetar(1000)">Bergetar 1x</button>
<button onclick="bergetar([1000,500,1000])">Bergetar 2x</button>
<button onclick="bergetar([1000,500,1000,400,1000])">Bergetar 3x</button>
<!-- nggak mesti nilai polanya seperti contoh diatas, agan biasa kreasikan sendiri -->
<script src="getar.js" charset="utf-8"></script>
</body>
</html>
file getar.js
function bergetar(pola){
var getaran = window.navigator.vibrate(pola);
console.log(getaran);
}
jika hasilnya true maka vibrate kita berhasil namun jika false mungkin browser tidak mendukung atau ada kesalahan kode yang agan tulis, dapat dilihat pada gambar dibawah ini :
Note :
- simpan di htdocs dengan sruktur folder : html5/index.php dan bergetar.js agar bisa diakses lewat Smart Phonenya
- untuk testingnya bisa gunakan Smart Phone agan masing masing dan usahakan browsernya pakai Chrome caranya harus tau IP Adress komputer kita kemudian teathering Wifi dengan Smart Phone agan setelah berhasil terhubung ke Smart Phone agan tinggal akses dengan cara 192.168.0.0.1/html/index.php
- tidak semua Browser yang mendukung, dapat dilihat pada gambar dibawah ini:
#SemogaBermanfaat
