MDN Web API 教程：深入理解 Vibration API 振动功能

什么是 Vibration API

Vibration API 是现代 Web 开发中一个有趣的硬件交互接口，它允许网页通过 JavaScript 控制设备的振动功能。这个 API 主要面向移动设备，当用户在移动浏览器中访问网页时，开发者可以通过简单的代码让设备产生物理振动反馈。

核心概念解析

振动模式的基本原理

Vibration API 的核心在于控制振动马达的开启和关闭时序。它支持两种调用方式：

1. 单次振动：指定一个持续时间（毫秒），设备会振动相应时长后停止
2. 模式振动：通过数组指定振动和暂停交替的模式

设备兼容性处理

这个 API 设计得很巧妙：如果设备不支持振动功能，调用 API 不会产生任何效果也不会报错，这使得开发者可以无需复杂的环境检测就能安全使用。

实际应用方法

基础振动实现

最简单的振动只需要一行代码：

// 振动200毫秒
navigator.vibrate(200);
// 等效写法
navigator.vibrate([200]);

复杂振动模式

更精细的控制可以通过数组模式实现：

// 振动200ms → 暂停100ms → 振动300ms
navigator.vibrate([200, 100, 300]);

这种模式可以无限延伸，创建出各种复杂的振动效果。值得注意的是，振动会在最后一个振动时段后自动停止，不需要以暂停时段结束。

振动控制技巧

停止振动有三种等效方式：

navigator.vibrate(0);
navigator.vibrate([]);
navigator.vibrate([0]);

高级应用场景

持续振动效果

通过结合 setInterval，可以实现周期性振动：

// 创建持续振动效果
function startRepeatedVibration(duration, interval) {
  const timer = setInterval(() => {
    navigator.vibrate(duration);
  }, interval);
  
  return timer;
}

// 使用示例
const vibrationTimer = startRepeatedVibration(200, 1000);

// 停止振动
clearInterval(vibrationTimer);
navigator.vibrate(0);

游戏反馈应用

在游戏开发中，可以用不同振动模式表示不同事件：

• 短振动：得分提示
• 长振动：游戏结束
• 模式振动：特殊事件

function gameFeedback(type) {
  const patterns = {
    score: [100],
    warning: [200, 100, 200],
    gameOver: [500]
  };
  
  navigator.vibrate(patterns[type] || []);
}

实际开发注意事项

1. 用户体验：振动会消耗电量并可能干扰用户，应当谨慎使用
2. 权限问题：目前主流浏览器不需要特殊权限即可使用振动功能
3. 浏览器差异：不同浏览器实现可能略有差异，建议进行兼容性测试
4. 移动端限制：iOS 上的 Safari 对振动API的支持可能有限

典型应用场景

1. 移动网页游戏中的触觉反馈
2. 表单验证失败时的物理提示
3. 重要通知的提醒增强
4. 无障碍应用中的辅助提示
5. 基于位置的提醒功能

总结

Vibration API 为 Web 开发者提供了一个简单而强大的工具，可以在支持的设备上增加触觉反馈层。虽然 API 本身很简单，但通过创造性的应用，可以显著提升移动 Web 应用的用户体验。记住要合理使用这一功能，避免过度振动造成用户困扰。