Vibration javascript API — управляем вибрацией устройства в мобильных браузерах

Многие из новых js API, которые появляются в браузере в последнне время, скорее ориентированы на мобилные устройства, чем на десктопные браузеры.

Vibration API — не исключение (позволяет управлять вибрацией устройств).

Ну.. и какие мысли полезли тебе в голову, наш юный читатеь?.. Сосредоточься, это всего лишь javascript! А то, что почему такие ассоциации будоражат твое сознание, австрийский дедушка Фрейд подробно объяснил еще около века назад ;)

Демо

vibration API

Пример будет работать только в мобильном хроме и FF.

Вот короткий урл и QR, что-бы попробовать ref.li/vibr

Код демки рассмотрим в конце статьи

Зачем может понадобиться управление вибрацией из браузера?

• Самое банальное и полезное — для создания эффекта обратной связи при нажатии кнопок.
• Для оповещении о пришедшем сообщении, письме, различных напоминаниях и т.п
• Для браузерных игр. (что-то взрывается, персонажа убивают, машина упирается в борт трассы.. ну и любого подобного трэша.
• При просмотре видео или прослушивании музыки, в моменты усиления низких частот, можно добавить немного вибрации (возможно это не совсем хорошая идея, но точно забавная).

На момент написания статьи (12.2012), Firefox для Android является единственным браузером, который поддерживает Vibration API. WebKit вроде как должен поддерживать, но пока ничего не работает ни под IOS, ни под Android. Opera тоже нервно курит в сторонке. Но я просто уверен — это дело времени, причем нескольких месяцев.

Для того, что-бы проверить наличие поддержки api в браузере можно сделать так:

JS

var supportsVibrate = "vibrate" in navigator;

По сути своей в Vibration Api все очень просто. Предусмотрен только один метод у объекта navigator. Это window.navigator.vibrate(). В этом можно убедиться заглянув в W3C Candidate Recommendation

window.navigator.vibrate() принимает 2 типа параметров:

1) положительные числа — время вибрации в милисекундах т.е

JS

//Вибрировать 1 секунду
window.navigator.vibrate(1000);

2) массив положительных чисел — заданная последовательность для вибрации

JS

// Вибрировать 3 секунды, подождать 2 секунды и опять вибрировать 1 секунду
window.navigator.vibrate([3000, 2000, 1000]);

Вибрация при этом не будет циклической и остановится сразу после выполнения заданной последовательности. Принудительно остановить вибрацию, можно с помощью вызова window.navigator.vibrate с 0 или пустым массивом в качестве параметра:

JS

// Любой из этих вариантов остановит вибрацию 
window.navigator.vibrate (0);  
window.navigator.vibrate ([]);  

Повторяющиеся последовательности вибраций.

Ничего специального для этого в vibration Api не придумано. Да и зачем.. берем setInterval и clearInterval и строим любую циклическую последовательность сами.

JS

var vInterval;

// вибрировать 1 раз
function vibrate(v) {
  navigator.vibrate(duration);
}

// Запустить повторяющуюся вибрацию с интервалом interval
function infiniteVibrate(duration, interval) {
  vInterval = setInterval(function() {
    vibrate(duration);
  }, interval);
}

Код демки в начале статьи:

HTML

<div id="error"></div>
<button onclick="vibrate(1000);">Вибрировать 1 секунду!</button>
<button onclick="vibrate([200,100,300,100]);">Вибрировать дважды!</button>
<button onclick="infiniteVibrate([200,100,300,100],1000);">Вибрировать бесконечно!</button>
<button onclick="stopVibrate();">Остановить все вибрации!</button>

js

// Кроссбраузерные попытки вибрировать

function vibrate(val){
  if("vibrate" in navigator)  return navigator.vibrate(val);
  if("oVibrate" in navigator)  return navigator.oVibrate(val);
  if("mozVibrate" in navigator)  return navigator.mozVibrate(val);
  if("webkitVibrate" in navigator)  return navigator.webkitVibrate(val);
  document.getElementById('error').innerHTML = "Ваш браузер не поддерживает vibration Api .. попробуйте открыть пример в мобильном fixefox, там все точно работает";
}

function infiniteVibrate(val, interval) {
  stopVibrate();
  vInterval = setInterval(function() {
     vibrate(val);
  }, interval);
}

function stopVibrate() {
  if(typeof(vInterval)!=="undefined") clearInterval(vInterval);
  vibrate(0);
}

Приятного вибрирования, господа :D

PDF и версия для печати