JavaScript Vibration API 手机振动功能详解
本文介绍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);
}
上述代码示例仅针对振动参数为单个数字的情况。若参数为数组,需计算其总持续时间,并根据具体模式进行循环控制。
应用场景与总结
振动API的典型应用场景
该API主要面向移动设备。在开发手机Web应用时,它是重要的警示工具;在Web游戏或多媒体应用中,振动功能能显著提升用户体验。例如,在游戏发生爆炸时让手机同步振动,可提供更沉浸的交互感。
您对JavaScript振动API的看法如何?认为它会迅速普及,还是实用性有限?
JS大数值转字符串出现科学计数法怎么办
2026-11-05 17:09:21
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
