无需登录 数据私有 本地保存

震动模式编辑器 - 自定义设备振动序列

API 开发工具 Vibration API 振动 模式 触觉
53
0
0
0

震动模式编辑器

自定义设备振动序列 · 可视化编辑 · 一键导出代码

振动波形预览 总时长: 0ms
添加振动段开始编辑
振动总时长: 0ms 暂停总时长: 0ms 段数: 0
预设模板
振动段列表
0段
点击左侧按钮添加振动段
JavaScript 代码 
// 添加振动段后自动生成代码
// navigator.vibrate([振动ms, 暂停ms, 振动ms, ...])
常见问题与知识点

Vibration API 是W3C制定的网页标准，允许网页通过JavaScript控制设备的振动马达。调用 navigator.vibrate() 即可触发振动，广泛应用于游戏反馈、通知提醒、可穿戴设备交互等场景。它接受一个毫秒数组作为振动模式。

Android Chrome、Android Firefox、Edge移动版等主流移动浏览器均良好支持。iOS Safari从12.1版本开始部分支持，但iOS的振动体验较为有限（通常仅支持系统默认振动，无法自定义复杂模式）。桌面浏览器大多不支持振动API，因为桌面设备通常没有振动马达。

navigator.vibrate([200, 100, 300]) 表示：振动200ms → 暂停100ms → 振动300ms。数组的偶数索引（0,2,4...）为振动时长，奇数索引（1,3,5...）为暂停时长。传入单个数字如 navigator.vibrate(500) 表示持续振动500ms。传入0可立即停止振动。

不同浏览器对振动时长有不同限制。通常单次振动建议不超过5000ms，过长的振动可能被浏览器截断或忽略。极短的振动（如<10ms）可能无法被设备感知。建议振动时长设置在50ms~3000ms之间以获得最佳体验。循环振动模式总时长建议不超过30秒。

振动API不需要用户授权，但大多数浏览器要求振动必须在用户手势（user gesture）触发的上下文中调用，例如点击按钮、触摸事件等。如果在页面加载时自动调用振动，可能会被浏览器静默拒绝。这也是一种保护用户免受滥用骚扰的机制。

点击"添加振动"或"添加暂停"按钮创建振动段，调整每段的时长（毫秒），可视化波形图会实时更新。点击播放按钮可在支持的设备上预览振动效果，勾选"循环"可重复播放。编辑完成后点击"复制"即可获取JavaScript代码，粘贴到您的项目中使用。您还可以导出/导入JSON文件保存您的振动模式。

当页面切换到后台（如用户切换App或锁屏）时，振动会自动停止。这是浏览器的安全策略，防止后台页面持续消耗电量并骚扰用户。页面重新回到前台后，需要用户再次触发才能重新开始振动。
🔧 相关工具