What is the Vibration API in HTML5 ?

Last Updated : 05 Jun, 2023

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 on mobile devices. Practically speaking, this feature is supported on mobile devices only.

Example: In this example, we will use Vibration API.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- Include the Bootstrap CDN -->
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          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.

What is the Vibration API in HTML5 ?

dikshapatro

Improve

Article Tags :

What is the Vibration API in HTML5 ?

Similar Reads

Thank You!

What kind of Experience do you want to share?