Learn JavaScript mobile phone vibration API

The new APIs provided in modern browsers are increasingly leaning towards mobile phone applications rather than traditional desktop applications, such as the JavaScript geolocation information API. Another JavaScript API that is only targeted at mobile applications is the Vibration API. Obviously, this API allows mobile programmers to use JavaScript to call the vibration function of the phone and set the vibration method and duration.

Related learning recommendations: javascript video tutorial

Judge the browser’s support for vibration API

A good habit Just check whether your current application environment and browser support the vibration API before using it. The following is the detection method:

// Standards ftw!
var supportsVibrate = "vibrate" in navigator;

There is only one API about vibration in the window.navigator object: vibrate.

Vibration API basic application

This navigator.vibrate function can accept a numeric parameter or a numeric array. When using an array parameter, the odd-digit value It is the number of seconds to vibrate, and the even-numbered digits are the number of waiting seconds.

// 振动1秒
navigator.vibrate(1000);

// 振动多次
// 参数分别是震动3秒，等待2秒，然后振动1秒
navigator.vibrate([3000, 2000, 1000]);

If you want to stop vibrating, you only need to pass 0 or an empty array to the navigator.vibrate method:

// 停止振动
navigator.vibrate(0);
navigator.vibrate([]);

It should be reminded that, for # The call to the ##navigator.vibrate method will not cause the phone to vibrate cyclically; when the parameter is a number, the vibration will occur once and then stop. When the parameter is an array, the vibration will vibrate according to the value in the array, and then stop vibrating.

Continuous vibration

We can simply use the

setInterval and clearInterval methods to produce the effect of making the phone continuously vibrate:

var vibrateInterval;

// Starts vibration at passed in level
function startVibrate(duration) {
	navigator.vibrate(duration);
}

// Stops vibration
function stopVibrate() {
	// Clear interval and stop persistent vibrating 
	if(vibrateInterval) clearInterval(vibrateInterval);
	navigator.vibrate(0);
}

// Start persistent vibration at given duration and interval
// Assumes a number value is given
function startPeristentVibrate(duration, interval) {
	vibrateInterval = setInterval(function() {
		startVibrate(duration);
	}, interval);
}

The above code is only for the case where the vibration parameter is a number. If the parameter is an array, you also need to calculate its total duration, and then loop based on its characteristics.

Scenarios for using Vibration API

This API is obviously targeted at mobile phone devices. When developing mobile WEB mobile applications, it is a good warning tool. When developing Web games or multimedia applications, this vibration function is an indispensable good technology. For example, when a user is playing your WEB game on a mobile phone, and an explosion occurs in the game, and you make the mobile phone vibrate with it, is it an excellent user experience?

What do you think about this JavaScript vibration API? Do you think it will become popular quickly? Still not of much use?

The above is the detailed content of Learn JavaScript mobile phone vibration API. For more information, please follow other related articles on the PHP Chinese website!