Usando la Vibration API de HTML5

  • por Eduardo Ramírez

En un proyecto reciente, tuvimos la misión de desarrollar una aplicación web que simulara el look and feel de una aplicación móvil nativa. Uno de los recursos que utilizamos para lograr esto fue la Vibration API de HTML5.

Esta función nos permite controlar el motor de vibración de un dispositivo, simplemente llamando al método 

navigator.vibrate([100])

Compatibilidad

Actualmente se encuentra disponible para una gran parte de los navegadores móviles, donde destaca por su ausencia Safari para iOS. Pueden encontrar el detalle actualizado acá.

Ejemplo

El método vibrate sólo recibe como parámetro un arreglo de enteros. Estos corresponden a tiempos de vibración y espera en milisegundos, alternadamente. Por ejemplo:

navigator.vibrate([100, 200, 100])

hará al dispositivo vibrar 100 milisegundos, detenerse por 200, y vibrar 100 a continuación. Podemos usar esto para definir patrones que refuercen lo que se busca transmitir al usuario, o que sean parte de la identidad del producto.

Haremos una demostración con el famoso himno instrumental "YYZ", de Rush.

function playYYZ(){
  var dot = [100, 100];
  var slash = [300, 100];
  var y = slash.concat(dot, slash, slash);
  var z = slash.concat(slash, dot, dot);
  var yyz = y.concat(y).concat(z);
  if (navigator.vibrate) {
    navigator.vibrate(yyz);
  }
}

 

Puedes probar este código, si tu navegador es compatible, haciendo click acá: