JavaScript Vibration API 手机振动功能详解

作者：函数茶馆

时间：2026-10-30

本文介绍JavaScript Vibration API，用于在移动Web应用中调用手机振动功能。内容涵盖API支持性检测、基础振动参数设置（数字与数组模式）、停止振动方法以及利用setInterval实现持续振动的技巧，适用于游戏和多媒体应用的交互增强。

文章目录

JavaScript Vibration API 概述

该API允许移动设备开发者通过JavaScript调用手机的振动功能，并可自定义振动的模式与持续时间。

API支持性检测

在正式使用前，建议先检测当前浏览器或应用环境是否支持振动API，以确保兼容性。


// Standards ftw!
var supportsVibrate = "vibrate" in navigator;

在window.navigator对象中，仅包含一个与振动相关的API属性：vibrate。

振动API基础应用

振动API的基础应用方法

navigator.vibrate函数可接收单个数字参数或数字数组。若使用数组，奇数索引值代表振动持续时间（秒），偶数索引值代表振动间的等待时间（秒）。


// 振动1秒
navigator.vibrate(1000);

// 振动多次
// 参数分别是震动3秒，等待2秒，然后振动1秒
navigator.vibrate([3000, 2000, 1000]);

若要停止当前振动，只需向navigator.vibrate方法传入0或一个空数组即可。


// 停止振动
navigator.vibrate(0);
navigator.vibrate([]);

需注意，调用navigator.vibrate不会导致手机无限循环振动。当参数为数字时，振动仅执行一次后停止；当参数为数组时，按数组定义的序列振动结束后即停止。

实现持续振动

实现持续振动的方案

可以通过结合使用setInterval和clearInterval方法来使手机产生持续振动的效果。


var vibrateInterval;

// Starts vibration at passed in level
function startVibrate(duration) {
 navigator.vibrate(duration);
}

// Stops vibration
function stopVibrate() {
 // Clear interval and stop persistent vibrating 
 if(vibrateInterval) clearInterval(vibrateInterval);
 navigator.vibrate(0);
}

// Start persistent vibration at given duration and interval
// Assumes a number value is given
function startPeristentVibrate(duration, interval) {
 vibrateInterval = setInterval(function() {
 startVibrate(duration);
 }, interval);
}

上述代码示例仅针对振动参数为单个数字的情况。若参数为数组，需计算其总持续时间，并根据具体模式进行循环控制。