如何使用HTML5振动API

移动设备的普及使得越来越多的用户通过手机和平板电脑访问网页。截至2013年12月，每五次网页访问中就有一次来自移动设备。如果您的网站或应用程序能够适应移动设备，这个比例可能会更高。多设备开发面临挑战，但也带来了一些台式电脑无法实现的可能性。例如，振动机制就是一个简单的触觉反馈设备，可以提醒您新的消息或电话。在嘈杂的环境中或安静的环境中（声音会造成干扰），它尤其有用。如果您的应用程序可以使用振动功能，岂不是很棒？

• 步行路线指示：左转一次振动，右转两次振动。
• 当事件发生或您靠近某人时，手机以特定方式振动。
• 您可以使用基于振动的摩尔斯电码发送秘密消息！
• 游戏可以通过在您碰撞或被导弹击中时振动来增强游戏体验。

HTML5 振动 API 允许您做到这一点！

是否需要振动？

仅仅因为我们可以让手机振动，并不意味着我们应该这样做。振动会严重消耗电池电量，因此如果电量不足或当前标签页中未运行游戏，最好将其禁用。根据您的应用程序，最好提供用户选项，以便他们可以启用、禁用或配置振动条件。

浏览器支持和检测

该 API 相对较新，目前仅限于最新版本的 Firefox 和 Chrome 支持。较早的版本分别需要 moz 和 webkit 前缀。您还应该使用具有振动机制的设备——API 可能会在您的浏览器中可用，但如果没有振动机制，您将无法知道它是否有效！使用以下检查来检测振动支持：

<code class="language-javascript">if ("vibrate" in navigator) {
    // 支持振动 API
}</code>

要检查和使用带前缀的版本，您可以使用以下代码：

<code class="language-javascript">// 启用振动支持
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

if (navigator.vibrate) {
    // 支持振动 API
}</code>

振动基础

可以通过将毫秒数传递给 navigator.vibrate 来设置基本振动：

<code class="language-javascript">// 振动一秒钟
navigator.vibrate(1000);</code>

或者，您可以传递一个包含以毫秒为单位指定的振动和延迟参数的数组。例如，要振动 500 毫秒，等待 300 毫秒，然后再次振动 100 毫秒：

<code class="language-javascript">// 振动一秒钟
navigator.vibrate([500, 300, 100]);</code>

偶数索引的数组项定义振动时间（数组从零开始，因此第一项和第三项分别是 0 和 2）。奇数索引的数组项定义延迟时间。振动是非阻塞的；当设备正在振动时，您的 JavaScript 代码将继续运行。要停止振动，您可以将零传递给 navigator.vibrate。此概念在游戏中可能很有用。例如，当用户撞坏汽车时，您设置 navigator.vibrate(10000)。但是，如果碰撞效果在 10 秒内结束，则设置 navigator.vibrate(0) 以结束振动。

振动演示

要在您的设备上测试 API……查看振动 API 演示……查看所有 HTML、CSS 和 JavaScript 的源代码。表单参数构建一个数组，在单击“开始”时将其传递给 navigator.vibrate。单击“停止”按钮时，将执行 navigator.vibrate(0);。尽情使用振动 API，如果您有任何有趣的用途，请告诉我。

HTML5 振动 API 常见问题解答

什么是 HTML5 振动 API？

HTML5 振动 API 是一种强大的工具，允许开发人员以编程方式访问设备上（如果存在）的振动硬件。这可以用于根据各种事件（例如接收通知或按下按钮）向用户提供触觉反馈。需要注意的是，API 并不能保证振动会发生，因为最终决定权留给操作系统和用户的设置。

如何在我的 Web 应用程序中使用振动 API？

要使用振动 API，您需要调用 navigator.vibrate() 方法。此方法接受单个整数或整数数组。单个整数表示振动持续的毫秒数。整数数组表示振动和暂停的模式。例如，navigator.vibrate(200) 将使设备振动 200 毫秒，而 navigator.vibrate([200, 100, 200]) 将使设备振动 200 毫秒，暂停 100 毫秒，然后再次振动 200 毫秒。

我可以在所有设备上使用振动 API 吗？

振动 API 主要用于具有内置振动硬件的移动设备。但是，可以在任何设备上调用 API。如果设备不支持振动，则对 navigator.vibrate() 的调用将被简单地忽略。

如何检查设备是否支持振动 API？

您可以使用 navigator 对象的 vibrate 属性来检查设备是否支持振动 API。如果该属性存在，则该设备支持该 API。以下是您可以执行此操作的方法：if ("vibrate" in navigator) { / 设备支持振动 / }。

我可以在振动结束前停止振动吗？

是的，您可以通过使用参数 0 或空数组调用 navigator.vibrate() 方法来在振动结束前停止振动。例如，navigator.vibrate(0) 或 navigator.vibrate([]).

所有浏览器都支持振动 API 吗？

大多数现代浏览器（包括 Chrome、Firefox 和 Opera）都支持振动 API。但是，Internet Explorer 不支持它，Safari 的支持有限。

我可以在工作线程上下文中使用振动 API 吗？

不可以，振动 API 在工作线程上下文中不可用。它只能在主浏览器上下文中使用。

使用振动 API 是否有任何限制？

是的，使用振动 API 有一些限制。例如，在某些浏览器中，API 只能响应用户操作（例如单击或触摸）来使用，以防止滥用或烦人的使用。

我可以指定振动的强度吗？

不可以，振动 API 不允许您指定振动的强度。强度由设备的硬件和操作系统控制。

我可以使用振动 API 创建复杂的振动模式吗？

是的，您可以通过将整数数组传递给 navigator.vibrate() 方法来使用振动 API 创建复杂的振动模式。数组中的每个整数都表示振动或暂停的持续时间。例如，navigator.vibrate([200, 100, 200, 100, 200]) 将创建一个由三个振动组成的模式，每个振动持续 200 毫秒，由两个暂停隔开，每个暂停持续 100 毫秒。

以上是如何使用HTML5振动API的详细内容。更多信息请关注PHP中文网其他相关文章！