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>
<link href=
rel="stylesheet" />
</head>
<body style="text-align: center">
<h1 style="color: green">I love GFG</h1>
<button type="button" class="btn btn-primary"
onclick="vibrate1(1000)">
Once
</button>
<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.
Share your thoughts in the comments
Please Login to comment...