如何使用HTML5的API，振动

用户越来越多地使用智能手机和平板电脑来访问网络。 截至2013年12月 ，一个在每五网访问量是来自移动设备。 如果您的网站或应用程序是移动感知，这一数字可能要高得多。

发展为多个设备有其挑战，但也有不属于通常可在台式机上的可能性。 考虑振动机构，它是可以提醒新邮件或电话的你一个简单的触觉反馈装置。 这是在嘈杂的环境中声音不能听到或安静的地方，这将是一个分心特别有用。

那岂不是巨大的，如果你能在你的应用程序中使用的振动？...

• 行走的方向可以用一个振动左两右表示。
• 这款手机可以在事件发生时以某种方式振动或你靠近的人。
• 你可以在基于振动的莫尔斯电码发送秘密消息！
• 一个游戏可以通过，当你崩溃振动或增强了导弹被击中。

这正是HTML5的振动API，允许你做！

振动或不震动？

只是因为我们可以震动的手机，但这并不表示我们应该。 振动是一个巨大的电池漏所以它可能是最好的，如果电量不足或游戏是禁止不活跃在当前选项卡 。 根据您的应用程序，它可能是最好提供一个用户选项，这样他们就可以启用，禁用或配置振动标准。

浏览器支持与检测

该API是相对较新，支持目前仅限于近期Firefox和Chrome的版本。 较早版本分别需要莫兹和WebKit的前缀。您还应该使用具有振动机构的装置 - 该API可用于您的浏览器，但你不会知道它的工作没有之一！

使用以下检查来检测振动支持：

if ("vibrate" in navigator) {
	// vibration API supported
}

To check and use prefixed versions, you can use code such as:

// enable vibration support
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

if (navigator.vibrate) {
	// vibration API supported
}

Vibration Basics

A basic vibration can be set by passing a number of milliseconds to navigator.vibrate :

// vibrate for one second
navigator.vibrate(1000);

Alternatively, you can pass an array with vibration and delay parameters specified in milliseconds. For example, to vibrate for 500ms, wait for 300ms, then vibrate again for 100ms:

// vibrate for one second
navigator.vibrate([500, 300, 100]);

The even-numbered array items define a vibration time (arrays are zero-based so the first and third items are 0 and 2). Odd-numbered array items define the delay time.

Vibration is non-blocking; your Javascript code will continue to run while the device is vibrating. To stop it, you can pass zero to navigator.vibrate .

This concept could be useful in games. For example, when the user crashes their car, you setnavigator.vibrate(10000) . However, if the crash effect ends before 10 seconds has elapsed, you setnavigator.vibrate(0) to finish it.

Vibration Demonstration

To test the API in your device…

View the Vibration API demonstration…

View the source for all HTML, CSS and Javascript. The form parameters build an array which is passed to navigator.vibrate when START is clicked. When the STOP button is clicked,navigator.vibrate(0); is executed.

Have fun with the Vibration API and let me know if you have any interesting uses for it.