# 通过 Web API Vibration 触发移动端物理振动

> 大多数移动设备支持硬件振动，可通过代码向用户提供物理性反馈；Vibration API 则允许前端开发人员通过JavaScript触发设备在给定的时间内振动。

Author: DeathGhost
Published: 2019-08-03 15:52:37
Category: javascript
Canonical: https://www.deathghost.cn/article/javascript/55
Keywords: Web API, Vibration, vibrate, 振动, 物理振动, 移动端振动, JavaScript触发振动, 振动API, 持久振动, 震动警报

浏览器供应商提供给我们的许多新API。其中一个简单的API是移动端触发振动的接口 Vibration API。这样前端开发人员就可以使用JavaScript触发设备在给定的持续时间内以及特定场景下振动。

使用场景适合于游戏（爆炸情景）、媒体（开启/结束）或警示性情景下触发，让用户在感官上得到一定程度的体验效果。

![Web 移动端振动 Vibration API Navigator.vibrate()](https://www.deathghost.cn/public/upload/article/2019/07/1564213788702.jpg)

Web 移动端振动 Vibration API Navigator.vibrate()

振动具有不同得长度，由单个整数组成，描述振动的毫秒数，或者描述振动和暂停模式的整数数组。

## 方法

Navigator.vibrate()

## 示例

window.navigator.vibrate(200);
window.navigator.vibrate([200]);
上述示例均使设备振动200 毫秒。

window.navigator.vibrate([200, 100, 200]);
这会使设备振动200 ms，然后暂停100 ms，然后再次振动设备200 ms。

## 取消振动

如果需要设置暂停，则可：

Navigator.vibrate(0)
设置0即可。

另外需要注意的是，上述振动在每个振动周期结束时自动停止，因此不必提供暂停。

持续振动

我们可以通过setInterval和clearInterval动作创建持久振动：

let vibrateInterval;
// 开始
function startVibrate(duration) {
    navigator.vibrate(duration);
}
// 停止
function stopVibrate() {
    if(vibrateInterval) clearInterval(vibrateInterval);
    navigator.vibrate(0);
}
// 持续
function startPersistentVibrate(duration, interval) {
    vibrateInterval = setInterval(function() {
        startVibrate(duration);
    }, interval);
}

## Demo

将下面代码复制到HTML中，在移动端打开页面，点击按钮（移动端Web e.g. QQ，微信或手机浏览器中）体验效果。

<button onclick="vibrateOnce()">振动一次</button>
<button onclick="multipleTimes()">振动一个周期</button>
<button onclick="startPersistentVibrate()">持续振动</button>
<button onclick="stopVibrate()">停止</button>
let vibrateInterval;
// 振动一次200ms
function vibrateOnce() {
  navigator.vibrate(200);
}
// 振动一个周期
function multipleTimes() {
  navigator.vibrate([100,30,100,30,100,30,200,30,200,30,200,30,100,30,100,30,100]);
}
// 停止振动
function stopVibrate() {
    if(vibrateInterval) {
      clearInterval(vibrateInterval)
    };
    navigator.vibrate(0);
}
// 持续循环振动以500ms
function startPersistentVibrate() {
  vibrateInterval = setInterval(() => {
    navigator.vibrate(500);
  }, 1000);
}

## Related

- Previous: [Intl.RelativeTimeFormat相对时间格式化](https://www.deathghost.cn/article/javascript/53)
- Next: [JS原生的深拷贝API structuredClone()](https://www.deathghost.cn/article/javascript/120)