Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What is the Vibration API in HTML5 ?

  • Last Updated : 10 Aug, 2021

Vibration is a sensation that triggers curiosity in a user and tends to make them perform a task. For example, in Fitness trackers, the vibration alert reminds user if they have been sitting too long and would potentially make them take a walk or move away from the desk or vibrations in phones or smartwatches triggers a user to look at the message alerts or attend calls.

The Vibration API does this by accessing the hardware of the software only if it exists. It is supported by HTML5 for the same and in browsers, supported by only Firefox, Chrome, and Microsoft Edge on PC, and faint support by Chrome, Android, Opera, and Samsung Internet in mobile devices. Practically speaking, this feature is supported on mobile devices only.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Example:

HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- Include the Bootstrap CDN -->
    <link
      href=
      rel="stylesheet" />
  </head>
  <body style="text-align: center">
    <h1 style="color: green">I love GFG</h1>
  
    <!-- Add button for a single vibration -->
    <button type="button" 
             class="btn btn-primary"
             onclick="vibrate1(1000)">
        Once
    </button>
  
    <!-- Add button for vibration pattern -->
    <button type="button" 
            class="btn btn-secondary" 
             onclick="vibrate2()">
        Pattern followed
    </button>
  
    <script>
      function vibrate1(milli) {
  
        // Vibrates once for the number of 
        // milliseconds passed as the argument
        navigator.vibrate(milli);
      }
      function vibrate2() {
  
        // Vibrates in a pattern by 
        // according to the given array
        navigator.vibrate(
          [400,150,300,120,200]
        );
      }
    </script>
  </body>
</html>

Output:



To access your local site on your mobile, find your IP address and open in the following link in your mobile browser:

http://<your ip address>:<port>/index.html

You can find out your actual IP address by using ipconfig command on Windows and ifconfig command on Linux. 

Now, on opening it on your mobile browser, you can access the buttons and experience the Vibration API’s feature.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!