HTML5 中的振动 API 是什么？

HTML5 中的振动 API 是一组可以在支持的设备上触发设备振动的 JavaScript 接口。这个 API 使得开发者可以通过使用 JavaScript 来控制设备的震动功能，以提供更丰富的用户交互体验。

使用振动 API

使用振动 API 非常简单。首先，你需要通过 JavaScript 获取到振动 API 的对象，然后使用该对象的方法来触发设备的振动。

以下是一个使用振动 API 的示例：

// 获取振动 API 的对象
const vibration = navigator.vibrate;

// 当用户点击按钮时触发设备振动
document.getElementById('vibrateButton').addEventListener('click', function() {
  // 判断设备是否支持振动功能
  if (vibration) {
    // 触发设备振动，持续时间为 1000 毫秒
    vibration(1000);
  }
});

检测设备是否支持振动

在使用振动 API 之前，可以通过检测设备是否支持振动来提供更好的用户体验。可以使用以下代码来检测设备是否支持振动：

// 获取振动 API 的对象
const vibration = navigator.vibrate;

// 检测设备是否支持振动
if (vibration) {
  console.log('设备支持振动功能');
} else {
  console.log('设备不支持振动功能');
}

触发不同类型的振动

除了指定振动的持续时间外，振动 API 还允许你触发不同类型的振动，以提供更多样化的用户体验。以下是一些常见的振动模式示例：

• 单次短暂振动：vibration(200)，持续 200 毫秒的振动；
• 多次重复振动：vibration([200, 100, 200])，连续触发三次不同持续时间的振动。

总结

HTML5 中的振动 API 提供了一种简单的方式来控制设备的振动功能。开发者可以通过使用 JavaScript 来触发设备的振动，并根据需要指定持续时间和振动模式。使用振动 API 可以给用户带来更丰富的交互体验，但在使用时应注意确保设备支持振动功能。