<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Infinite Vibration Button - A simple web page to demonstrate the Vibration API">
<title>Infinite Vibration Button</title>
<style>
/* Your CSS styles here */
</style>
</head>
<body>
<header>
<h1>Infinite Vibration Button</h1>
</header>
<main>
<button id="startVibrateButton">Start Vibration</button>
<button id="stopVibrateButton">Stop Vibration</button>
</main>
<script>
let vibrateInterval;
// Function to start infinite vibration
function startInfiniteVibration() {
if ("vibrate" in navigator) {
vibrateInterval = setInterval(() => {
navigator.vibrate(1000); // Vibrate for 1000 milliseconds (1 second)
}, 1000); // Vibrate every 1000 milliseconds (1 second)
} else {
console.log("Vibration API not supported");
}
}
// Function to stop infinite vibration
function stopInfiniteVibration() {
if (vibrateInterval) {
clearInterval(vibrateInterval);
}
}
// Attach the startInfiniteVibration and stopInfiniteVibration functions to the buttons
document.getElementById("startVibrateButton").addEventListener("click", startInfiniteVibration);
document.getElementById("stopVibrateButton").addEventListener("click", stopInfiniteVibration);
</script>
</body>
</html>