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

vibration-api

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

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

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

Демо

vibration API

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

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

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

6 комментариев на “Vibration javascript API – управляем вибрацией устройства в мобильных браузерах
  1. Владислав пишет:

    Простите что не в тему, а на каком движке/фреймворке разработан данный сайт?

  2. Шамиль пишет:

    Вообще круто!!!

  3. Константин пишет:

    Респект! А есть ли возможность услышать стандартное аудио оповещение? например смс

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

* Copy This Password *

* Type Or Paste Password Here *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Узнавай о новых статьях первым!

Спасибо за лайк в FACEBOOK
Подписывайтесь на новости вконтакте
Последние статьи от html5.by