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: определяем поддержку на устройстве Чтобы определить, поддерживает ли устройство вибрацию, можно выполнить следующую проверку: 1 if (window.navigator && window.navigator.vibrate) { 2 // Вибрация поддерживается 3 } else { 4 // Вибрация не поддерживается 5 } Другим возможным способом является проверка объекта navigator. 1 if ('vibrate' in navigator) { 2 // Вибрация подерживается 3 } else { 4 // Вибрация не поддерживается 5 } Шаг 2: вибрируем один раз Чтобы сказать устройству, что нужно издать вибросигнал, нужно вызвать метод vibrate с целым числом в качестве аргумента. Например, чтобы указать устройству вибрировать в течении секунды, нужно сделать следующее: 1 // Издать один вибросигнал в течении одной секунды 2 navigator.vibrate(1000); Шаг 3: вибрируем несколько раз Чтобы сказать устройству вибрировать несколько раз с паузами между вибрациями, нужно передать методу vibrate массив целых значений. Если мы хотим заставить устройство вибрировать дважды с паузой в полсекунды, и с конечным вибросигналом в две секунды, нужно сделать следующее: 1 // Вибрируем три раза 2 // Первые два сигнала длительностью в одну секунду 3 // Последний сигнал длительностью две секунды 4 // Паузы между сигналами в полсекунды 5 navigator.vibrate([1000, 500, 1000, 500, 2000]); Шаг 4: завершаем вибрацию Чтобы остановить вибрацию на устройстве, необходимо передать методу vibrate значение 0, или пустой массив. 1 // Останавливаем вибрацию 2 navigator.vibrate(0); Или 1 // Останавливаем вибрацию 2 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 вибраций. Она представляет собой простую страницу с тремя кнопками, при нажатии на которые происходит однократная вибрация, две повторяющиеся вибрации, и кнопка, останавливающая вибрацию. Демо определяет, если вибрация поддерживается браузером. В противном случае вы увидите сообщение “Вибрация не поддерживается”, и отключенные кнопки. Я рекомендую проверять эту демонстрацию на мобильных устройствах. 01 <!DOCTYPE html> 02 <html> 03 <head> 04 <meta charset="UTF-8"> 05 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 06 <meta name="author" content="Aurelio De Rosa"> 07 <title>Демонстрация API вибраций от Aurelio De Rosa</title> 08 <style> 09 body 10 { 11 max-width: 500px; 12 margin: 2em auto; 13 font-size: 20px; 14 } 15 h1 16 { 17 text-align: center; 18 } 19 .hidden 20 { 21 display: none; 22 } 23 24 .buttons-wrapper 25 { 26 text-align: center; 27 } 28 .button-demo 29 { 30 padding: 0.5em; 31 margin: 1em auto; 32 } 33 .author 34 { 35 display: block; 36 margin-top: 1em; 37 } 38 </style> 39 </head> 40 <body> 41 <h1>Vibration API</h1> 42 <div class="buttons-wrapper"> 43 <button id="button-play-v-once" class="button-demo">Однократная вибрация</button> 44 <button id="button-play-v-thrice" class="button-demo">Трехкратная вибрация</button> 45 <button id="button-stop-v" class="button-demo">Остановить</button> 46 </div> 47 <span id="v-unsupported" class="hidden">Вибрация не поддерживается</span> 48 <small class="author"> 49 Demo created by <a href="http://www.audero.it">Aurelio De Rosa</a> 50 (<a href="https://twitter.com/AurelioDeRosa">@AurelioDeRosa</a>) 51 </small> 52 <script> 53 window.navigator = window.navigator || {}; 54 if (navigator.vibrate === undefined) { 55 document.getElementById('v-unsupported').classList.remove('hidden'); 56 ['button-play-v-once', 'button-play-v-thrice', 'button-stop-v'].forEach(function(elementId) { 57 document.getElementById(elementId).setAttribute('disabled', 'disabled'); 58 }); 59 } else { 60 document.getElementById('button-play-v-once').addEventListener('click', function() { 61 navigator.vibrate(1000); 62 }); 63 document.getElementById('button-play-v-thrice').addEventListener('click', function() { 64 navigator.vibrate([1000, 500, 1000, 500, 2000]); 65 }); 66 document.getElementById('button-stop-v').addEventListener('click', function() { 67 navigator.vibrate(0); 68 }); 69 } 70 </script> 71 </body> 72 </html> Заключение В данной статье я расписал API вибраций, что это такое, как его использовать. Как мы могли видеть, API очень прост в использовании, и предоставляет простой и элегантный способ улучшить взаимодействие с пользователем на мобильных устройствах, особенно в таких вещах, как фильмы и игры. API вибрация неплохо поддерживается десктопными и мобильными браузерами, так что ничего не запрещает использовать его в своих приложениях.