HTML5 ha sido un soplo de aire fresco para la web, que no sólo ha afectado a la web tal y como la conocemos. HTML5 ofrece una serie de APIs que permiten a los desarrolladores crear sitios web interactivos y mejorar la experiencia del usuario en los dispositivos móviles. En este artículo, vamos a echar un vistazo de cerca a la Vibration API de HTML5.
¿Recuerdas cuando se introdujo por primera vez la PlayStation en los años noventa? Si es que sí, también recordarás la pequeña revolución que se formó con la introducción del DualShock, un mando que vibraba interactivamente con lo que estuviésemos jugando. Fue un tremendo éxito.
Todos mis amigos que poseían una Playstation se pasaron al mando DualShock inmediatamente, y yo no fui una excepción. ¿Por qué fue tan exitoso? El factor clave de su éxito fue la capacidad para proporcionar información al jugador en forma de vibración, lo que hace que la inmersión en el juego sea mucho mayor.
El DualShock era sólo el comienzo de esta tendencia. Los controladores han avanzado muchísimo con productos tan revolucionarios como el Kinect y tan transgresores como el Oculus Rift y el popular Omni.
La web se ha convertido en un medio mucho más potente y el resultado de esto es que el desarrollo del videojuego se ha trasladado a la web. Hasta hace pocos años, los juegos para web se basaban en Flash y Silverlight. Hoy, sin embargo, estas tecnologías ya no son necesarias para desarrollar juegos para web y esto se debe, en gran medida, a HTML5.
A mayor potencia, mayor responsabilidad. Para la web, esto significa la necesidad de APIs bien definidas que nos ayuden a crear una mejor experiencia para el usuario y la capacidad de aprovechar las nuevas tecnologías disponibles en, por ejemplo, los dispositivos móviles. Una de estas API es la Vibration API.
¿Qué es la Vibration API?
La Vibration API está diseñada para hacer frente a los casos en los que es necesario o se desea una respuesta táctil. Prácticamente todo dispositivo moderno tiene la capacidad de vibrar. La Vibration API ofrece la posibilidad de acceder mediante programación a las capacidades de vibración del dispositivo y trabajar con ella. La API no está destinada a ser utilizado como un mecanismo de notificación genérica como la Web Notificaciones API, que sí fue creada para este propósito.
Al igual que con las aplicaciones móviles nativas, las posibilidades de la Vibration API son infinitas. Se puede utilizar durante la reproducción de un vídeo para que el dispositivo vibre durante las explosiones. Los juegos son otra vía excelente para la Vibration API. Los juegos ya hacen un amplio uso de las capacidades del hardware de los dispositivos móviles y por lo tanto la API de vibración es una gran característica para los juegos web. Sólo recuerda por qué el DualShock se hizo tan popular y se entenderás lo que quiero decir.
Implementación
Ahora que sabemos lo que la Vibration API puede hacer por nosotros, vamos a ver cómo podemos utilizarla. Permíteme comenzar con las buenas noticias, la API es muy sencilla de utilizar. Sólo hay un método que necesitas conocer, vibrate. Eso es todo. El método vibrate pertenece al window's navigator. El método vibrate acepta un parámetro, que puede ser un número entero o un array de números enteros.
Si se le pasa un número entero a la función vibrate, el dispositivo vibrará una duración de ese número entero en milisegundos. Si se le pasa un array de números, definirás un patrón de vibración. Los números enteros en los índices impares indican al dispositivo que vibre x tiempo, mientras que los números enteros con indices pares indican de cuánto tiempo deberían ser las pausas entre las vibraciones. Para impedir que el dispositivo vibre, puede pasarle 0 al método o llamarlo sin parámetros.
Dicen que una imagen vale más que mil palabras, pero, para los desarrolladores, te aseguro que un fragmento de código es probablemente mejor que mil millones de palabras. Vamos a ver algunos ejemplos.
Paso 1: Detectar si está soportada
Para detectar si el navegador del dispositivo es compatible con la Vibration API, puedes realizar una simple comprobación como la siguiente.
if (window.navigator && window.navigator.vibrate) {
// Shake that device!
} else {
// Not supported
}
Otra opción es la de inspeccionar el objeto del navegador.
if ('vibrate' in navigator) {
// Shake that device!
} else {
// Not supported
}
Paso 2: Vibrar una vez
Para decirle al dispositivo que vibre, invocamos el método vibrate y le pasamos un número entero. Por ejemplo, para decirle al dispositivo para que vibre durante un segundo haríamos lo siguiente:
navigator.vibrate(1000);
Paso 3: Vibrar varias veces
Para decirle al dispositivo que vibre varias veces con una pausa entre cada vibración, le pasamos un array de enteros al método vibrate. Si queremos que el dispositivo vibre dos veces con una pausa de medio segundo y termine con una vibración de dos segundos, haríamos lo siguiente:
// Vibrate three times // First two vibrations last one second // Last vibration lasts two seconds // Pauses are half a second navigator.vibrate([1000, 500, 1000, 500, 2000]);
Paso 4: Parar la vibración
Para impedir que el dispositivo vibre, pasa el valor 0 al método vibrate o un array vacío.
navigator.vibrate(0);
o
navigator.vibrate([]);
Demo
Me gustaría terminar este tutorial con una simple demo de la Vibration API. Es una simple página HTML 5 que contiene tres botones, uno para que vibre una vez, uno para que vibre en repetidas ocasiones, y un botón para detener la vibración. La demo detecta si el navegador es compatible con la API. Si no lo es, verás el mensaje "API no compatible" y los botones estarán deshabilitados. Recomiendo probar la demo en un dispositivo móvil.ç
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="author" content="Aurelio De Rosa">
<title>Vibration API Demo by Aurelio De Rosa</title>
<style>
body
{
max-width: 500px;
margin: 2em auto;
font-size: 20px;
}
h1
{
text-align: center;
}
.hidden
{
display: none;
}
.buttons-wrapper
{
text-align: center;
}
.button-demo
{
padding: 0.5em;
margin: 1em auto;
}
.author
{
display: block;
margin-top: 1em;
}
</style>
</head>
<body>
<h1>Vibration API</h1>
<div class="buttons-wrapper">
<button id="button-play-v-once" class="button-demo">Vibrate Once</button>
<button id="button-play-v-thrice" class="button-demo">Vibrate Thrice</button>
<button id="button-stop-v" class="button-demo">Stop</button>
</div>
<span id="v-unsupported" class="hidden">API not supported</span>
<small class="author">
Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a>
(<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>)
</small>
<script>
window.navigator = window.navigator || {};
if (navigator.vibrate === undefined) {
document.getElementById('v-unsupported').classList.remove('hidden');
['button-play-v-once', 'button-play-v-thrice', 'button-stop-v'].forEach(function(elementId) {
document.getElementById(elementId).setAttribute('disabled', 'disabled');
});
} else {
document.getElementById('button-play-v-once').addEventListener('click', function() {
navigator.vibrate(1000);
});
document.getElementById('button-play-v-thrice').addEventListener('click', function() {
navigator.vibrate([1000, 500, 1000, 500, 2000]);
});
document.getElementById('button-stop-v').addEventListener('click', function() {
navigator.vibrate(0);
});
}
</script>
</body>
</html>
Fuente: Aurelio de Rosa