JS手机振动API vibrate

Eidesen 发布于2019-08-21 10:52 / 2942人阅读

摘要：判断兼容浏览器对振动的支持情况，一个好的习惯就是在使用之前要检查一下当前你的应用环境浏览器是否支持振动。下面就是检测的方法在对象里就只有一个关于振动的。

判断兼容

浏览器对振动API的支持情况，一个好的习惯就是在使用之前要检查一下当前你的应用环境、浏览器是否支持振动API。下面就是检测的方法：

var supportsVibrate = "vibrate" in navigator;

在window.navigator对象里就只有一个关于振动的API：vibrate。

振动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;

// 开始震动
function startVibrate(duration) {
    navigator.vibrate(duration);
}

// 停止震动
function stopVibrate() {
    // 清除间隔和停止持续振动
    if(vibrateInterval) clearInterval(vibrateInterval);
    navigator.vibrate(0);
}

//在给定的持续时间和间隔时开始持续的振动
//假定一个数字值
function startPeristentVibrate(duration, interval) {
    vibrateInterval = setInterval(function() {
        startVibrate(duration);
    }, interval);
}

上面的这段代码只是针对振动参数是一个数字的情况，如果参数是数组，你还需要计算一下它的总共持续时间，然后根据它的特征来进行循环。

文档参考

w3 vibration

MDN Navigator vibrate

云服务器 GPU云服务器 js 调用手机振动 vibrator vibrate Vibration

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86339.html

虚假来电：HTML5 振动 API 的恶意使用

摘要：到目前为止，以及其他浏览器要使用位置信息摄像头地址簿等资源必须申请权限。目前振动的强度还不能控制，只能控制持续时间。提示是平台上唯一支持振动的。当页面使用振动的时候，目前并不会申请权限。一个新的API出来了。HTML5 （很快）将支持用户设备振动。这明显是很有趣的事情，比如它可以用户触发提醒，提升游戏体验，以及其他各种好玩的事情，例如通过振动发送摩斯代码。到目前为止，Chrome...

roland_reed 2019-06-21 16:20 评论0 收藏0
Web Notifications 学习

摘要：据猜测是为浏览器翻译服务。通知内容，显示在通知标题之下，默认为空字符串标记通知的类型，打上标签，默认为空字符串。在最新的技术评审稿中，该参数被舍弃设置该标志表示最终用户将不能很容易地清除。设置该标志，通知将为永久型通知。 Web Notification 网页通知API。这是2011年由谷歌技术员John Gregg提出的一项网页通知api。定义请读者直接参考whatwg工作组对...

Forelax 2019-08-21 15:09 评论0 收藏0