Включаем поддержку вибрации

Современные браузеры поддерживают вибрацию, которая есть в смартфонах и планшетах. Вы можете добавить поддержку вибрации в своих сценариях. На данный момент Vibration API не является стандартом, а пока носит рекомендательный характер. Из современных браузеров вибрацию не поддерживают Internet Explorer и Safari. Firefox (15+), Opera (19+) и Chrome (32+) поддерживают (указаны версии, когда поддержка стала полноценной. До этого в некоторых версиях поддержку нужно было включить в настройках).

За вибрацию отвечает метод vibrate(), который относится к window.navigator. У метода один параметр, который принимает целое число или массив целых чисел. Число отвечает за промежуток времени в миллисекундах, в течение которого будет вибрировать устройство. Если вы указываете массив чисел, то чётные числа отвечают за вибрацию, а нечётные - за паузу между вибрацией.

Чтобы убедиться, что браузер поддерживает метод вибрации, можно сделать проверку

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

Вибрация на одну секунду включается следующим образом.

navigator.vibrate(1000);

Сложная вибрация - три раза с паузой на полсекунды между ними. Первые два раза вибрация длится одну секунду, а на третий раз вибрация длится две секунды.

navigator.vibrate([1000, 500, 1000, 500, 2000]);

Чтобы остановить вибрацию

navigator.vibrate(0);
// или так
navigator.vibrate([]);

Напишем небольшой демонстрационный пример. Тестировать пример следует на мобильных устройствах. В большинстве случаев это будут смартфоны и планшеты на Android.

Исходник

<div class="buttons-wrapper">
    <button id="button-play-v-once" class="button-demo">Вибрировать один раз</button><br>
    <button id="button-play-v-thrice" class="button-demo">Вибрировать три раза</button><br>
    <button id="button-stop-v" class="button-demo">Стоп</button>
</div>

<script>

    window.navigator = window.navigator || {};
    if (navigator.vibrate === undefined) {
        alert("Вибрация не поддерживается");
        ['button-play-v-once', 'button-play-v-thrice', 'button-stop-v'].forEach(function(elementId) {
            document.getElementById(elementId).setAttribute('disabled', 'disabled');
        });
    } else {
        alert("Вибрация поддерживается. Нажмите на кнопку");
        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>

Реклама