Всем привет и в этой небольшой статье мы рассмотрим как можно создавать вибрации на вашем мобильной устройстве через api vibrate. Отмечу что данное api работает только на устройствах поддерживающих вибрацию( это как правило мобильные гаджеты).

Эффект вибрации мы можем использовать в играх, сообщениях и т.п. Для того чтобы создать вибрации на устройстве мы должны воспользоваться методом vibrate объекта navigator:

navigator.vibrate(500);

Здесь мы указали время вибрации 500 мили секунд или пол секунды. То есть вибрация у нас будет длиться пол секунды. Однако если мы запустим данный код на мобильной устройстве в браузере у нас ничего не произойдет. Потому что данный метод нельзя вызвать при загрузке страницы. Это можно проверить на своем обычном компьютере или ноутбуке, перейдя в консоль браузера вы увидите там ошибку.

Пользоваться данным методом вы можете при обработке событий (клик, нажатие клавиш, прием сообщения и т.п.), то есть событий которые совершил пользователь после загрузки страницы.

Например:

<button id="vibrate">Нажмите</button>
<script>
    document.querySelector('#vibrate').addEventListener('click', function(){
        if (navigator.vibrate) {
            navigator.vibrate(500);
        }
    });
</script>

Здесь кликнув по кнопке 'нажмите' у нас мобильное устройство будет вибрировать пол секунды. Заметьте что мы указали внутри обработчика события условие. C помощью него мы проверяем поддерживается ли метод vibrate в текущем браузере на мобильном устройстве.

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

navigator.vibrate([200, 500, 200,500,200]);

В данном примере мы указали что у нас будет три периода вибраций по 200 милисекунд каждая с интервалов между собой в пол секунды.

То есть в данном массиве у нас чередуются длительности вибраций и интервалов между ними.

На этом дорогие друзья у меня на сегодня все. Желаю вам успехов и удачи! Пока!