HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>vibrate — safe</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 1.5rem; }
    button { padding: 0.5rem 1rem; margin: 0 0.35rem 0.35rem 0; cursor: pointer; }
    #out { margin-top: 1rem; white-space: pre-wrap; }
  </style>
</head>
<body>
  <p>
    <button type="button" id="short">Buzz 150ms</button>
    <button type="button" id="pat">Pattern</button>
    <button type="button" id="stop">Cancel</button>
  </p>
  <pre id="out">Ready.</pre>
  <script>
    function vibrateSafe(pattern) {
      if (typeof navigator.vibrate !== "function") {
        return { ok: false, reason: "missing-api" };
      }
      try {
        var accepted = navigator.vibrate(pattern);
        return {
          ok: accepted,
          reason: accepted ? "accepted" : "invalid-pattern"
        };
      } catch (err) {
        return { ok: false, reason: err.name };
      }
    }

    function show(result) {
      document.getElementById("out").textContent = JSON.stringify(result);
    }

    document.getElementById("short").addEventListener("click", function () {
      show(vibrateSafe(150));
    });
    document.getElementById("pat").addEventListener("click", function () {
      show(vibrateSafe([80, 40, 80]));
    });
    document.getElementById("stop").addEventListener("click", function () {
      show(vibrateSafe(0));
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

vibrate — safe helper (Try It)