JavaScript implémente le code API des vibrations des téléphones mobiles

Une nouvelle API est sortie. HTML5 prendra (bientôt) en charge les vibrations de l'appareil utilisateur. C'est évidemment une chose très intéressante. Par exemple, cela peut déclencher des rappels pour les utilisateurs et améliorer l'expérience de jeu. L'éditeur ci-dessous triera l'API JavaScript de vibration du téléphone mobile pour que tous les amis qui en ont besoin puissent s'y référer.

Les nouvelles API fournies dans les navigateurs modernes s'orientent de plus en plus vers les applications de téléphonie mobile plutôt que vers les applications de bureau traditionnelles, telles que l'API d'informations de géolocalisation javascript. Une autre API JavaScript destinée uniquement aux applications mobiles est l'API Vibration. Évidemment, cette API permet aux programmeurs mobiles d'utiliser JavaScript pour appeler la fonction de vibration du téléphone et définir le mode et la durée de la vibration.

Déterminez la prise en charge par le navigateur de l'API de vibration
Une bonne habitude est de vérifier si votre environnement d'application et votre navigateur actuels prennent en charge l'API de vibration avant de l'utiliser . Voici la méthode de détection :

Le code est le suivant :

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

Il n'y a qu'une seule API sur les vibrations dans l'objet window.navigator : vibrate .

Application de base de l'API Vibration
La fonction navigator.vibrate peut accepter un paramètre numérique ou un tableau numérique Lors de l'utilisation de paramètres de tableau, les chiffres impairs sont le nombre de secondes pour vibrer et les chiffres pairs. Les chiffres numérotés correspondent au nombre de secondes d'attente.

// Vibrer pendant 1 seconde

navigator.vibrate(1000);

// Vibrer plusieurs fois
// Les paramètres sont vibrer pendant 3 secondes, attendre 2 secondes, puis vibrer pendant 1 seconde

navigator.vibrate([3000, 2000, 1000]);

Si vous souhaitez arrêter de vibrer, il vous suffit de passer 0 ou un tableau vide à la méthode navigator.vibrate :

// Arrêter de vibrer

navigator.vibrate(0);
navigator.vibrate([]);

Obligatoire Pour rappel, l'appel de la méthode navigator.vibrate ne fera pas vibrer le téléphone de manière cyclique ; lorsque le paramètre est un nombre, la vibration se produira une fois puis s'arrêtera. Lorsque le paramètre est un tableau, la vibration vibrera en fonction de la valeur du tableau, puis cessera de vibrer.

Vibration continue
Nous pouvons simplement utiliser les méthodes setInterval et clearInterval pour produire l'effet de faire vibrer le téléphone en continu :

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);
}

Le code ci-dessus concerne uniquement les paramètres de vibration qui sont un nombre Dans le cas où le paramètre est un tableau, vous devez également calculer sa durée totale, puis boucler en fonction de ses caractéristiques.

Scénarios d'utilisation de l'API Vibration
Cette API est évidemment destinée aux appareils de téléphonie mobile. Lors du développement d'applications mobiles WEB, c'est un bon outil d'avertissement. Lors du développement de jeux Web ou d'applications multimédia, cette fonction de vibration est une bonne technologie indispensable. Par exemple, lorsqu'un utilisateur joue à votre jeu WEB sur un téléphone mobile, qu'une explosion se produit dans le jeu et que vous faites vibrer le téléphone mobile avec, est-ce une excellente expérience utilisateur ?

Que pensez-vous de cette API de vibration JavaScript ? Pensez-vous qu’il deviendra rapidement populaire ? Ça ne sert toujours pas à grand-chose ?

Ce qui précède représente l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript, Tutoriel vidéo HTML5 !