HTML5: API работы с вибрацией

HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

Помните то время, когда миру был представлен PlayStation? Если так - то вы, возможно, также вспомните, что PLayStation также принес на рынок небольшую революцию в виде контроллера DualShock, который ввел в обиход обратную тактильную связь с помощью вибромоторов. Данный подход показал себя успешным.

Все мои друзья, у которых была приставка, сменили свои джойстики на джойстики на контроллеры DualShock, и я не был исключением. Почему он был так популярен? Потому, что данный контроллер обеспечивал обратную тактильную связь с игроком при помощи вибрации, он заставлял тебя глубже окунуться в игру.

DualShok был только началом целого направления. Контроллеры становились все более совершенными, например Kinect, OculusRift, и неимоверно популярный Omni.

Веб набирает обороты, и попутным результатом стало то, что многие игры перекочевали в веб. Несколько лет назад игры писались на Flash и Silverlight. Сейчас эти технологии необязательны для написания игр, и большая заслуга в этом плане принадлежит HTML5.

Большая гибкость и мощность требует большей ответственности. Применительно к вебу это означает необходимость хороших API для создания приложений с улучшением пользовательского взаимодействия, а также поддержку новых технологий, доступных, к примеру, на мобильных устройствах. Одно из таких API - API для работы с вибрациями.

Что такое API для работы с вибрациями?

Теперь, когда мы знаем, что такое API для работы с вибрациями, давайте посмотрим, что с его помощью модно сделать. Начну с хорошей новости - API очень просто использовать. Вам нужно знать всего лишь об одном методе - vibrate. Вот и все. Метод vibrate относится к объекту navigator объекта window. Метод vibrate принимает один параметр, который может быть целым числом, или массивом целых чисел.

Если передано только одно целое число, то устройство подаст единичный вибросигнал, длительностью в указанное количество миллисекунд. Если вы передадите массив целых чисел, то вы зададите шаблон вибрации. Целые четные числа говорят устройству, какой длительности нужно воспроизводить вибросигналы, а нечетные определяют паузы между ними. Чтобы завершить вибрацию, в метод vibrate можно передать 0, или вызвать метод без параметров.

Изображение стоит тысячи слов, но для разработчиков фрагмент кода стоит миллиона слов, так что давайте рассмотрим пару примеров.

Шаг 1: определяем поддержку на устройстве

Чтобы определить, поддерживает ли устройство вибрацию, можно выполнить следующую проверку:

if (window.navigator && window.navigator.vibrate) {
   // Вибрация поддерживается
} else {
   // Вибрация не поддерживается
}

Другим возможным способом является проверка объекта navigator.

if ('vibrate' in navigator) {
   // Вибрация подерживается
} else {
   // Вибрация не поддерживается
}

Шаг 2: вибрируем один раз

Чтобы сказать устройству, что нужно издать вибросигнал, нужно вызвать метод vibrate с целым числом в качестве аргумента. Например, чтобы указать устройству вибрировать в течении секунды, нужно сделать следующее:

// Издать один вибросигнал в течении одной секунды
navigator.vibrate(1000);

Шаг 3: вибрируем несколько раз

Чтобы сказать устройству вибрировать несколько раз с паузами между вибрациями, нужно передать методу vibrate массив целых значений. Если мы хотим заставить устройство вибрировать дважды с паузой в полсекунды, и с конечным вибросигналом в две секунды, нужно сделать следующее:

// Вибрируем три раза
// Первые два сигнала длительностью в одну секунду
// Последний сигнал длительностью две секунды
// Паузы между сигналами в полсекунды
navigator.vibrate([1000, 500, 1000, 500, 2000]);

Шаг 4: завершаем вибрацию

Чтобы остановить вибрацию на устройстве, необходимо передать методу vibrate значение 0, или пустой массив.

// Останавливаем вибрацию
navigator.vibrate(0);

Или

// Останавливаем вибрацию
navigator.vibrate([]);

Поддержка в браузерах

API вибраций довольно хорошо поддерживаются в десктопных и мобильных браузерах. Большие браузеры, которые не поддерживают API вибраций - Internet Explorer и Safari. Посмотрите на этот список, чтобы увидеть, какие браузеры поддерживают этот API.

• Firefox 11+: до версии 15 нужно использовать префикс -moz
• Opera 17+: чтобы использовать API в браузерах до 19 версии, нужно активировать флаг “Экспериментальные возможности веб-платформ”
• Chrome 30+: чтобы использовать API в браузерах до версии 32, нужно включить флаг “Экспериментальные возможности веб-платформ”

Реальной эмуляции данного API для старых браузеров не существует. Тем не менее, для FirefoxOS существует библиотека эмуляции этого API под названием mozVibrate-polyfill, написанная Кристианом Хеллманом. Вы можете найти ее на GitHub.

Демонстрация

Я бы хотел закончить эту статью простой демонстрацией использования API вибраций. Она представляет собой простую страницу с тремя кнопками, при нажатии на которые происходит однократная вибрация, две повторяющиеся вибрации, и кнопка, останавливающая вибрацию. Демо определяет, если вибрация поддерживается браузером. В противном случае вы увидите сообщение “Вибрация не поддерживается”, и отключенные кнопки. Я рекомендую проверять эту демонстрацию на мобильных устройствах.

<!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>Демонстрация API вибраций  от 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">Однократная вибрация</button>
      <button id="button-play-v-thrice" class="button-demo">Трехкратная вибрация</button>
      <button id="button-stop-v" class="button-demo">Остановить</button>
    </div>
    <span id="v-unsupported" class="hidden">Вибрация не поддерживается</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>

Заключение

В данной статье я расписал API вибраций, что это такое, как его использовать. Как мы могли видеть, API очень прост в использовании, и предоставляет простой и элегантный способ улучшить взаимодействие с пользователем на мобильных устройствах, особенно в таких вещах, как фильмы и игры. API вибрация неплохо поддерживается десктопными и мобильными браузерами, так что ничего не запрещает использовать его в своих приложениях.