1

Introducción y uso de la API de Vibración en HTML5

11350Puntos

hace 5 años

Gracias a la llegada de HTML5 y CSS3, tenemos un sinfín de características en la web: animaciones, bordes redondeados, video, audio, etc. Eso implica que la web ya no es tan simple como antes. Y no sólo me refiero a que tu página se vea bonita; sino a que las personas se sientan cómodas y tengan una buena experiencia al navegar en tu sitio. HTML5 nos ofrece una serie de APIs que nos dan acceso a funciones que antes sólo podíamos implementar con una app nativa. Un ejemplo de ello es la API de vibración. Esta nos permite, gracias a JavaScript, acceder al hardware del dispositivo y emitir vibraciones. Así es, leíste bien, vibraciones. El uso de la API de vibración es muy fácil. Sólo necesitamos usar el método vibrate con un parámetro; ya sea un entero o un array de enteros. Si quieres verlo en vivo, visita el demo desde un dispositivo móvil.

Compatibilidad

Para detectar si el navegador es compatible con la API de vibración sólo basta con hacer una simple comprobación. [js] if (window.navigator && window.navigator.vibrate) { // En caso de ser compatible } else { // En caso de no ser compatible alert('Tu dispositivo no soporta la API de vibración') } [/js]

Hacer que el dispositivo vibre

Para hacer que nuestro dispositivo vibre usamos el método vibrate, que mencioné anteriormente, con el parámetro de un número entero. [js] navigator.vibrate (1000); [/js] El entero que le pasamos es para decirle que haga vibrar el dispositivo durante un segundo. Si queremos que dure más tiempo sólo basta con aumentar ese valor.

Vibrar varias veces

Para hacer que nuestro dispositivo vibre varias veces. Es decir, que tenga una pausa entre cada vibración; ahora como parámetro usamos un array de enteros. [js] navigator.vibrate([1000, 500, 1000, 500]); [/js] Con esto le decimos que vibre dos veces y tenga dos pausas de medio segundo.

Fin de la vibración

Para hacer que el dispositivo se detenga cuando está vibrando, sólo pasamos como valor el número cero o un array vacío. [js] navigator.vibrate (0); [/js] o [js] navigator.vibrate ([]); [/js] Ahora que ya sabes cómo usar la API de vibración, puedes interactuar con el HTML y divertirte un poco: HTML [html] <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>API de vibración</title> </head> <body> <a href="#" class="btn" id="vibrar">¡Vibrar!</a> <a href="#" class="btn" id="vibrar-dos">¡Vibrar dos veces!</a> <a href="#" class="btn" id="vibrar-mucho">¡Vibrar mucho tiempo!</a> <a href="#" class="btn" id="vibrar-off">Apagar</a> </body> </html> [/html] JavaScript [javascript] if (window.navigator && window.navigator.vibrate) { document.querySelector("#vibrar").addEventListener("click", function () { navigator.vibrate(1000); }, false); document.querySelector("#vibrar-dos").addEventListener("click", function () { navigator.vibrate([200, 100, 200, 100]); }, false); document.querySelector("#vibrar-mucho").addEventListener("click", function () { navigator.vibrate(10000); }, false); document.querySelector("#vibrar-off").addEventListener("click", function () { navigator.vibrate(0); }, false); } else { alert("Tu dispositivo no soporta la API de vibración"); } [/javascript] Como pudiste notar,  la API de vibración es muy fácil de usar y nos proporciona miles de formas de interactuar con el usuario. Puede ser en un juego o un video, pero esto ya depende de tu imaginación. Puedes ver el código del demo en Github; pero si lo que quieres es seguir aprendiendo acerca de las herramientas que te pueden ayudar a personalizar tu sitio web y mejorar su interfaz de usuario, no te pierdas el curso de HTML5 y CSS3 en Platzi. Entrar al curso de HMTL5 y CSS3
Filiberto
Filiberto
@FiliSantillan

11350Puntos

hace 5 años

Todas sus entradas
Escribe tu comentario
+ 2