Web API Vibration
Last Updated :
23 Nov, 2023
Web API Vibration enables web developers to manage device vibrations and enrich user interactions. The Web API Vibration is a part of the Web APIs that enable web developers to interact with the hardware features of a user’s device. Specifically, it allows developers to control the vibration motor of a device.
Uses of Web Vibration API
- Notifications: Vibration can be used in web applications to provide haptic feedback for notifications, alerts, or messages. This can be especially useful when users have their sound turned off or are in a noisy environment.
- Gaming: In games, the Vibration API is a tool, for creating realistic in-game effects, like collisions, explosions, or accomplishments. It enhances the gaming experience by making it more immersive.
- User Feedback: Vibration can provide immediate feedback to users when they perform certain actions on a website or web app. For example, you can use vibrations to confirm a successful form submission or button click.
Web Vibration API Methods
Navigator is an object that serves as a crucial gateway to various features and information about the user’s web browsing environment. Among its many properties and methods, the navigator provides the vibrate() method. This method is instrumental in controlling the vibration motor present in devices, such as smartphones and tablets. By utilizing the vibrate() method, web developers can harness the power of tactile feedback, enhancing user interactions and creating more engaging web experiences.
Syntax:
navigator.vibrate(vibrationPattern: number | number[])
Parameters:
- vibrationPattern: This argument may accept a single value or array of values
- If a single argument is given to vibrate(), then it represents the duration of vibration in milliseconds
- If an array of integers is provided, then it represents the pattern of alternating durations of vibration and pause in milliseconds. the first argument represents the duration of vibration in milliseconds, the second argument represents the duration of the pause in milliseconds, and so on.
Return Type:
Return Boolean true if the vibration is supported in the browser and executed successfully, otherwise it will return false
Note: In order to stop the vibration we need to pass 0 as an argument to the vibrate() method.
Example 1: In this example, we are making an event listener which will be called whenever the button is clicked and that device will start vibrating.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Web API Vibrate Example</title>
<style>
#fullscreen-element {
width: 100%;
height: 100%;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>
The System will vibrate for
1000 milliseconds(1 second)
</h1>
<button id="vibrateButton">
Click to vibrate
</button>
<script>
const vibrateButton =
document.getElementById("vibrateButton");
vibrateButton.addEventListener("click", () => {
// Check wether browser support vibration or not
if ("vibrate" in navigator) {
// If browser supported then vibrating
// the system for 1 second
navigator.vibrate(1000);
} else {
alert(
"Vibration is not supported on this device/browser.");
}
});
</script>
</body>
</html>
|
Output:
Output: It will be shown on the web browser
Example 2: In this example, the system will vibrate in pattern wise. System will vibrate for 1 seconds and take 1 second pause and then so on.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Web API Vibrate Example</title>
<style>
#fullscreen-element {
width: 100%;
height: 100%;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>
The System will vibrate for 1000
milliseconds(1 second)
</h1>
<button id="vibrateButton">
Click to vibrate
</button>
<script>
const vibrateButton =
document.getElementById("vibrateButton");
vibrateButton.addEventListener("click", () => {
//checking wether browser support vibration or not
if ("vibrate" in navigator) {
//if supported then vibrating system for
// 1 second and pause for 1 second continue
navigator.vibrate([1000, 1000, 1000, 1000, 1000, 1000]);
} else {
alert(
"Vibration is not supported on this device/browser.");
}
});
</script>
</body>
</html>
|
Example 3: In this example, code generates a web page featuring a button. Whenever the button is clicked it verifies if the users browser can handle vibrations. If it does it initiates a vibration pattern on the device for one second. Then terminates the vibration after three seconds using the navigator.vibrate(0) method and prevents the further vibrations of system.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Web API Vibrate Example</title>
<style>
#fullscreen-element {
width: 100%;
height: 100%;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>
The System will vibrate in pattrens
</h1>
<button id="vibrateButton">
Click to vibrate
</button>
<script>
const vibrateButton =
document.getElementById("vibrateButton");
vibrateButton.addEventListener("click", () => {
// After 3 seconds stopVibration method will
// executed and stop the further vibration
window.setTimeout(stopVibration, 3000);
// Checking wether browser support vibration or not
if ("vibrate" in navigator) {
// If supported then vibrating system for 1 second
navigator.vibrate([1000, 1000, 1000, 1000,
1000, 1000, 1000, 1000, 1000, 1000]);
} else {
alert(
"Vibration is not supported on this device/browser.");
}
});
function stopVibration() {
// Stop the vibrations
navigator.vibrate(0);
}
</script>
</body>
</html>
|
Browser Support
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Safari
Share your thoughts in the comments
Please Login to comment...