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 вибрация неплохо поддерживается десктопными и мобильными браузерами, так что ничего не запрещает использовать его в своих приложениях.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://code.tutsplus.com/tutorials/html5-vibration-api--mobile-22585
Перевел: Станислав Протасевич
Урок создан: 28 Июня 2016
Просмотров: 15365
Правила перепечатки
5 последних уроков рубрики "HTML5"
-
Расширяем возможности HTML за счёт создания собственных тегов
В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.
-
Определение доступности атрибута HTML5 с помощью JavaScript
Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.
-
Создание форм с помощью Webix Framework — 4 практических примера
Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.
-
Знакомство с фрэймворком Webix
В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.
-
Отключение HTML5 валидации
Бесит валидация, которая добавляется к полям формы, если вы пользуетесь HTML5? Её можно без проблем отключить.