如何使用 JavaScript 操作设备的震动 (Vibration API)？

推荐答案

-- -------------------- ---- -------
-- --------- --------- ---
-- ---------- -- ---------- -
  -- ----------
  ----------------------- 

  -- ------------------------------
  ----------------------- ---- ------

  -- ----
  -- ---------------------

- ---- -
    ---------------------- --- --- --------- -- ---- -----------
-

本题详细解读

Vibration API 简介

HTML5 Vibration API 允许 Web 应用程序控制设备的振动硬件。这在创建各种类型的通知、反馈和游戏体验时非常有用。

使用方法

1. navigator.vibrate(pattern): 这是 Vibration API 的核心方法。它接受一个参数 pattern，用于定义振动模式。

   • 单个数值 (Number): 表示振动的持续时间，单位为毫秒。例如，navigator.vibrate(200) 表示振动 200 毫秒。

   • 数组 (Array): 表示振动和暂停的交替模式。数组中的值依次代表振动持续时间、暂停持续时间、振动持续时间，以此类推，单位均为毫秒。例如，navigator.vibrate([200, 100, 300]) 表示：振动 200 毫秒，暂停 100 毫秒，再振动 300 毫秒。

   • 0 或空数组: 可以用来停止当前正在进行的震动。navigator.vibrate(0)或 navigator.vibrate([])

2. 特性检测: 为了避免在不支持 Vibration API 的浏览器中出现错误，需要先进行特性检测，即检查 navigator.vibrate 是否存在。通常使用 if ('vibrate' in navigator) 进行检查。

3. 注意事项:

   • 用户通常需要在浏览器中授予网站振动权限。某些浏览器可能不会允许网站在没有用户交互的情况下直接进行振动。
   • 并非所有设备都支持振动。有些设备可能不支持此 API 或者无法进行细粒度的振动控制。
   • 过度的振动可能会影响用户体验，所以合理使用此功能。

代码示例解读

-- -------------------- ---- -------
-- --------- --------- ---
-- ---------- -- ---------- -
    -- ----------
    -----------------------

    -- ------------------------------
    ----------------------- ---- ------

    -- ----
    -- ---------------------


- ---- -
    ---------------------- --- --- --------- -- ---- -----------
-

• 特性检测: 代码首先检查 navigator 对象中是否存在 vibrate 属性。如果存在，则表示当前浏览器支持 Vibration API。
• 简单震动: 调用 navigator.vibrate(200) 来使设备震动 200 毫秒。
• 复杂震动模式: 调用 navigator.vibrate([200, 100, 300]) 创建了一个复杂的振动模式，模拟先振动，然后暂停，再振动的效果。
• 取消震动: 通过注释的代码 // navigator.vibrate(0); 展示了如何使用 navigator.vibrate(0) 或 navigator.vibrate([]) 来停止当前正在进行的震动。
• 不支持时的处理: 如果特性检测结果为 false，则在控制台中输出一条消息，告知用户当前浏览器不支持 Vibration API。