L'API Vibration

Articlejavascript

Publié par le , mis à jour le (6105 lectures)

vibration

L'API Vibration en JavaScript permet d'accéder à la fonctionnalité de vibration sur les appareils compatibles, notamment mobiles.

Pour l'utiliser, vous pouvez d'abord vérifier si l'appareil prend en charge la vibration en examinant la propriété navigator.vibrate. Si cette propriété existe, vous pouvez utiliser la méthode navigator.vibrate() pour déclencher la vibration, en précisant la durée en millisecondes.

// Vérifier au préalable si le navigateur la supporte
if ('vibrate' in navigator) {
  // Déclencher la vibration pendant 2 secondes
  navigator.vibrate(2000);
}

Vous pouvez également contrôler la durée et constituer un motif à l'aide d'un tableau d'entiers représentant chacun une durée en millisecondes pour spécifier les temps de vibration et de pause, alternativement :

if ('vibrate' in navigator) {
  // Déclencher une vibration sous forme de motif
  // Vibrer pendant 1 seconde, faire une pause pendant 0,5 seconde,
  // Vibrer pendant 0,2 seconde, faire une pause pendant 0,2 seconde,
  // Vibrer pendant 0,5 seconde, faire une pause pendant 1 seconde
  navigator.vibrate([1000, 500, 200, 200, 500, 1000]);
}

👉 Consultez sur votre mobile une démonstration avec différents motifs de vibrations par Christopher Kade.

Quel usage ?

Il n'est plus nécessaire de présenter l'usage complet que l'on fait couramment des vibrations pour notifier l'internaute dans les applications mobiles, mais résumons : attirer l'attention de l'utilisateur ou l'utilisatrice lorsque l'écran est éteint ou hors de vue par exemple à la réception d'un message, indiquer qu'un événement important se produit, ou simplement pour ajouter une touche de réalisme à l'application par exemple dans un jeu (donner l'impression que l'appareil est secoué lorsque le personnage subit un choc ou chute).

N'en abusez pas trop, et pensez à prévoir une option pour respecter les préférences de l'internaute et pouvoir désactiver les vibrations.

Commentaires

Juste un petit retour : la condition ne s'est pas révélée suffisante chez moi. En effet, un navigateur sous desktop tel que Chrome peut très bien supporter les vibrations... mais pas le matériel. Du coup j'ajoute aussi un test pour vérifier si je suis bien sur un écran de portable, via le touch :

if ('vibrate' in navigator && 'ontouchstart' in window) {}

Mais certains écrans desktops ou portables supportent le tactile, à améliorer donc.

Commenter

Vous devez être inscrit et identifié pour utiliser cette fonction.

Connectez-vous (déjà inscrit)

Oubli de mot de passe ? Pas de panique, on va le retrouver

Pas encore inscrit ? C'est très simple et gratuit.