Monday, June 19

HTML5 Vibration API to Vibrate Phone From a Website

HTML5 Vibration API to Vibrate Phone From a Website

HTML 5 comes with new and improved features and one of them is navigator.vibrate which instruct browser's to start vibration for certain events. Vibration API can be used to generate vibration for click events , popups and alerts. Vibration API can be helpful for showing alert and popups. Vibration API only supports Chrome , Android and Firefox mobile browsers till now. You can use below codes to generate vibration for certain events .These codes also work with blogger and wordpress.


Click to Vibrate

How to generate vibration on click event ?

To generate vibration from a anchor text , button or a div element simply add id='vib' to them. for example if you want to vibrate phone when a visitor click on a anchor text then codes will look like this

<a id="vib" href='livthreads.com'>livethreade</a>

Now, add below script with anchor text which generates vibration when a element with id vib is clicked.

<script>
document.getElementById("vib").addEventListener('click', function(){
  if("vibrate" in navigator){
    navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;                       
if (navigator.vibrate) {
      navigator.vibrate([500]);    
}  } });</script>

This scripts will generate vibration for 500 miliseconds you can change red bold value to change time of vibration.

How to generate vibration with popup and alerts ?

To generate vibration with popup and alerts simply add below codes to your popup and alert script.

 navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;                       
if (navigator.vibrate) {
      navigator.vibrate([500]);