웹사이트에서 Vibration API를 사용하는 방법

안녕하세요 여러분 👋

이 기사에서는 웹사이트에서 Vibration API를 어떻게 사용할 수 있는지 알아봅니다.
Vibration API를 사용하여 웹사이트를 사용하는 사용자에게 촉각 또는 진동 피드백을 제공할 수 있습니다.

대부분의 최신 모바일 장치에는 소프트웨어 코드가 장치를 흔들어 사용자에게 물리적 피드백을 제공할 수 있는 진동 하드웨어가 포함되어 있습니다. 따라서 이 API는 모바일 장치에서만 잘 작동하며 동일한 대상입니다.
Vibration API는 웹 앱이 진동 하드웨어가 있는 경우 액세스할 수 있도록 허용합니다.

구현 👨‍💻

API를 살펴보겠습니다.

브라우저의 window.navigator 개체에서 API에 액세스할 수 있습니다.

진동 API 지원 확인

항상 API 지원을 확인하는 것이 좋습니다.

if (Boolean(window.navigator.vibrate)) {
    // It Supports
    ...
}

vibrate는 진동을 담당하는 방법입니다.

하나의 인수를 예상합니다.

Argument is a number or an array of numbers for a series of vibrations. Those numbers are considered as milliseconds.

메서드가 잘못된 매개 변수로 인해 진동할 수 없는 경우 false를 반환하고 그렇지 않으면 true를 반환합니다.

단일 진동 📳

단일 진동의 경우 단일 숫자를 직접 또는 배열로 전달할 수 있습니다.

// Will vibrate the device for 500ms
window.navigator.vibrate(500);

// Same as the above line
window.navigator.vibrate([500]);

패턴 진동 📳 📳 📳

패턴으로 장치를 진동시키기 위해 숫자 배열을 전달할 수 있습니다.

짝수 인덱스 숫자는 진동을 담당하고 홀수 인덱스 숫자는 다음 진동 전에 그만큼 밀리초 지연됩니다.

// Vibrate for 500ms, Wait for 200ms, Vibrate for 800ms
window.navigator.vibrate([500, 200, 800]);

진동 취소

진행 중인 진동 패턴을 취소하려면 0 또는 빈 배열 또는 모두 0을 포함하는 배열을 vibrate 메서드에 전달해야 합니다.

window.navigator.vibrate(0);
window.navigator.vibrate([])

재미있는 예 ✨

모스 부호로 진동SOS.

window.navigator.vibrate([
    100,30,100,30,100,30,
    200,30,200,30,200,30,
    100,30,100,30,100
]);

*Working only on Chrome Android
Sample Code | Live Link

Originally published on blog.bibekkakati.me

읽어주셔서 감사합니다🙏

이 기사가 마음에 드셨거나 도움이 되셨다면 좋아요를 눌러주세요 👍

편하게 접속하세요👋

| |


내 작업이 마음에 들고 지원하고 싶다면 여기에서 할 수 있습니다. 정말 감사하겠습니다.