How to Use the HTML5 Vibration API

The popularity of mobile devices has made more and more users access web pages through mobile phones and tablets. As of December 2013, one out of every five web page visits came from a mobile device. This ratio may be higher if your website or app is able to adapt to mobile devices. Multi-device development faces challenges, but it also brings possibilities that desktop computers cannot achieve. For example, the vibration mechanism is a simple haptic feedback device that reminds you of new messages or calls. It is especially useful in noisy or quiet environments (sound can cause interference). Wouldn't it be great if your app can use the vibration feature?

• Walking route instructions: turn left and vibrate twice.
• When an event occurs or you are approaching someone, the phone vibrates in a specific way.
• You can send secret messages using vibration-based Morse codes!
• The game can enhance the gaming experience by vibrating when you collide or get hit by a missile.

HTML5 Vibration API allows you to do this!

Is vibration required?

Just because we can make the phone vibrate, it doesn't mean we should do that. Vibration can severely drain the battery, so if the battery is low or the game is not running in the current tab, it is best to disable it. Depending on your application, it is best to provide user options so that they can enable, disable, or configure vibration conditions.

Browser support and detection

This API is relatively new and is currently limited to the latest versions of Firefox and Chrome support. Earlier versions require moz and webkit prefixes, respectively. You should also use a device with a vibration mechanism – the API may be available in your browser, but without the vibration mechanism, you won't know if it works! Use the following checks to detect vibration support:

if ("vibrate" in navigator) {
    // 支持振动 API
}

To check and use a prefixed version, you can use the following code:

// 启用振动支持
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

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

Vibration Basics

The basic vibration can be set by passing milliseconds to navigator.vibrate:

// 振动一秒钟
navigator.vibrate(1000);

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

// 振动一秒钟
navigator.vibrate([500, 300, 100]);

Array terms with even indexes define vibration time (the array starts at zero, so the first and third terms are 0 and 2, respectively). An array item with an odd index defines the delay time. Vibration is non-blocking; your JavaScript code will continue to run when the device is vibrating. To stop vibration, you can pass zeros to navigator.vibrate. This concept can be useful in the game. For example, when a user crashes a car, you set navigator.vibrate(10000). However, if the collision effect ends within 10 seconds, set navigator.vibrate(0) to end the vibration.

Vibration Demo

To test the API on your device...View Vibration API Demo...View all HTML, CSS, and JavaScript source code. The form parameter builds an array that is passed to navigator.vibrate when clicking Start. When the "Stop" button is clicked, navigator.vibrate(0); is executed. Use the Vibration API as much as you like, let me know if you have any interesting uses.

HTML5 Vibration API FAQ

What is the HTML5 Vibration API?

HTML5 Vibration API is a powerful tool that allows developers to programmatically access vibrating hardware on their devices (if present). This can be used to provide haptic feedback to the user based on various events, such as receiving notifications or pressing a button. It should be noted that the API does not guarantee that vibrations will occur, as the final decision is left to the operating system and the user's settings.

How to use the Vibration API in my web application?

To use the vibration API, you need to call the navigator.vibrate() method. This method accepts a single integer or array of integers. A single integer represents the number of milliseconds of vibrations. An array of integers represents vibration and pause modes. For example, navigator.vibrate(200) will vibrate the device for 200 milliseconds, while navigator.vibrate([200, 100, 200]) will vibrate the device for 200 milliseconds, pause for 100 milliseconds, and then vibrate again for 200 milliseconds.

Can I use the Vibration API on all devices?

Vibration API is mainly used in mobile devices with built-in vibration hardware. However, the API can be called on any device. If the device does not support vibration, the call to navigator.vibrate() will be simply ignored.

How to check if the device supports vibration API?

You can use the vibrate property of the navigator object to check whether the device supports the vibration API. If this property exists, the device supports the API. Here is how you can do this: if ("vibrate" in navigator) { / The device supports vibration / }.

Can I stop vibrating before the vibration is over?

Yes, you can stop the vibration before it ends by calling the navigator.vibrate() method with parameter 0 or an empty array. For example, navigator.vibrate(0) or navigator.vibrate([]).

Does all browsers support the vibration API?

Most modern browsers, including Chrome, Firefox, and Opera, support the vibration API. However, Internet Explorer does not support it, and Safari has limited support.

Can I use the vibration API in the worker thread context?

No, the vibration API is not available in the worker thread context. It can only be used in the main browser context.

Are there any restrictions on using the Vibration API?

Yes, there are some limitations to using the Vibration API. For example, in some browsers, APIs can only be used in response to user actions, such as clicks or touches, to prevent abuse or annoying use.

Can I specify the intensity of the vibration?

No, the Vibration API does not allow you to specify the intensity of the vibration. The strength is controlled by the device's hardware and operating system.

Can I use the Vibration API to create complex vibration modes?

Yes, you can create complex vibration patterns using the vibration API by passing an array of integers to the navigator.vibrate() method. Each integer in the array represents the duration of vibration or pause. For example, navigator.vibrate([200, 100, 200, 100, 200]) will create a pattern consisting of three vibrations, each lasting 200 milliseconds, separated by two pauses, each lasting 100 milliseconds.

The above is the detailed content of How to Use the HTML5 Vibration API. For more information, please follow other related articles on the PHP Chinese website!