API de vibração HTML5: teste de vibrador, exemplos, plug-ins e código – Tecnologia

Você já quis fazer seu telefone vibrar diretamente de um site usando JavaScript?

Neste guia completo, você aprenderá como aproveitar a nova API HTML Vibration para criar experiências imersivas na web adicionando efeitos de vibração com apenas algumas linhas de código JavaScript.

Por que usar a API Vibration em sites?

Os efeitos de vibração podem fornecer feedback tátil para aprimorar a experiência do usuário para usuários móveis. Quando usadas com moderação, as vibrações podem tornar os elementos da web mais interativos, sem serem irritantes ou usados ​​em demasia.

Alguns ótimos casos de uso:

  • Fornecer feedback tátil sobre botão cliques
  • Notificações e alertas
  • Efeitos divertidos combinado com música ou temas

Com um design cuidadoso, as vibrações podem melhorar significativamente a experiência do usuário em sites e aplicativos móveis. ✨

Vamos dar uma olhada rápida em como funciona:

// Vibra por 1 segundo navigator.vibrate(1000);

Neste guia completo você aprenderá:

Então, se você quiser fazer seus projetos da web vibrarem, vibrarem, agitarem e chacoalharem – vamos começar!

Suporte ao navegador da API de vibração

A API Vibration é compatível com a maioria dos navegadores modernos, mas há algumas exceções:

Dispositivo/navegador Apoiar
Safári iOS ❌ Não
Ópera Mini ❌ Não
Ou seja ❌ Não
Navegador Android ✅ Desde Android 4.4
cromada ✅ Sim!
Raposa de fogo ✅ Sim!
Seu navegador
Ler:  Correção: código de erro 2902_1 da Vizio TV

A API de vibração é implementada em navigator.vibrate. Portanto, chamar a função faz seu telefone vibrar. Você pode testar se o seu navegador é recente o suficiente para ter a função vibrar no navegador. Para verificar o suporte em JavaScript:

if (“vibrar” no navegador) { // vibração suportada! }

Existem algumas limitações importantes:

  • Requer hardware de vibração real no dispositivo
  • A página precisa estar visível – não funciona em guias em segundo plano
  • Alguns navegadores limitam a vibração excessiva

Agora vamos ver como realmente acionar vibrações!

Uso de navigator.vibrate

A função navigator.vibrate aceita um número ou uma matriz de números.

No exemplo a seguir, o dispositivo vibrará por 1000 milissegundos (ms):

Código de teste

// vibra por 1000 ms navigator.vibrate(1000) // ou alternativamente navigator.vibrate([1000])

O padrão de vibração é formado por milissegundos de duração da vibração e pela duração do período de espera.

Neste exemplo, os dispositivos vibrarão por 1000 senhora, espere 500 ms e ​​vibre novamente.

Código de teste

// dispositivo vibrará espere vibrar navigator.vibrate([1000, 500, 1000])

Qualquer nova chamada interrompe a sequência de vibração anterior. Se a página não estiver mais visível, como bloquear o dispositivo, minimizar a janela, passar para outra aba, a vibração também para.

Neste exemplo os dispositivos irão parar de vibrar.

Código de teste

// Para de vibrar navigator.vibrate() navigator.vibrate(0) navigator.vibrate([])

Como vibrar seu telefone na web

Podemos continuar vibrando até que o usuário pare de tocar no dispositivo. A vibração para depois de um tempo. Mas, de qualquer maneira, não foi feito para ser pressionado infinitamente.

Neste exemplo, o dispositivo continuará vibrando até que o evento de toque pare

Código de teste

Ler:  Seis plug-ins obrigatórios do Chrome para usuários do WordPress

var isMobile = /iPhone|iPod|iPad|Android|BlackBerry/.test(navigator.userAgent) $(‘.button’).on(isMobile ? ‘touchstart’ : ‘mousedown’, function (e) { navigator.vibrate( Infinito) // Infinito é um número }) $(‘.button’).on(isMobile ? ‘touchend’ : ‘mouseup’, function (e) { navigator.vibrate(0) })

Vibrar ao clicar

O melhor caso de uso que posso imaginar para esta API é para botões. Você recebe um pequeno feedback tátil, como acontece com aplicativos nativos. Isso pode ser feito definindo a vibração para um número muito baixo. Para mim 50ms parece ideal.

Neste exemplo, todos os botões e links desta página vibram ao serem tocados. Também detectamos se o dispositivo é móvel e usamos touchend.

Código de teste

var isMobile = /iPhone|iPod|iPad|Android|BlackBerry/.test(navigator.userAgent) $(‘.button, a’).on(isMobile ? ‘touchend’ : ‘click’, function (e) { navigator. vibrar(50) })

Vibrar por meio de caixas de seleção

Vibrar depois de clicar em uma caixa de seleção deslizante também é muito útil. Parece muito natural. Há uma vibração curta no início, depois um período de espera enquanto a caixa de seleção se move e uma vibração mais longa no final.

Neste exemplo, a caixa de seleção vibrará.

$(‘.ui.checkbox’). clique (função () { navegador.vibrate ([5, 200, 20]) })

Duração da vibração

Se você não tiver certeza de quanto tempo o feedback tátil deve durar. Você pode experimentar vários intervalos de tempo. Experimente todos esses botões em um dispositivo móvel. Qualquer coisa acima 100ms parece ter saudades de mim.

Neste exemplo, os botões a seguir vibram em um intervalo de tempo diferente.

Vibrar na notificação

Outro ótimo caso de uso são as notificações. Eles podem demorar um pouco mais do que o feedback tátil. Padrões também podem ser usados ​​para diferenciar.

Por favor fique atento às notificações vibratórias do telefone e tente não replicá-las para não confundir o usuário. Algum feedback visual junto com a vibração seria o ideal.

Clique nos botões abaixo. Quando a barra de progresso chega ao fim. Você recebe uma notificação! Cada botão tem um padrão de vibração diferente.

// Vibra ao concluir var pattern = [500, 100, 500]; $(“.progress .bar”) .css({largura: “0%”}) .animate({largura: “100%”}, { duração: 1000, completo: function() { if (canVibrate) navegador. vibrar(padrão); } });

Ler:  6 plug-ins de boletins informativos para WordPress

Vibração com padrões musicais

Groggie mencionou sua postagem no blog sobre o uso da API Vibration para músicas e temas. É um exemplo muito legal do que pode ser feito usando a API Vibration e um pouco de criatividade. Clique nos títulos abaixo para jogar.

navegador.vibrate([
125, 75, 125, 275, 200, 275, 125, 75, 125, 275, 200, 600, 200, 600,
]) navegador.vibrate([
200, 100, 200, 275, 425, 100, 200, 100, 200, 275, 425, 100, 75, 25, 75, 125,
75, 25, 75, 125, 100, 100,
]) navegador.vibrate([
500, 110, 500, 110, 450, 110, 200, 110, 170, 40, 450, 110, 200, 110, 170, 40,
500,
]) navegador.vibrate([
100, 30, 100, 30, 100, 200, 200, 30, 200, 30, 200, 200, 100, 30, 100, 30, 100,
])

Exemplos de códigos de API de vibração

Vibração Vue.js

Eu costumava escrever meu próprio código de API Vibration em Vue.js, mas com os ganchos sendo introduzidos no Vue 3, comecei a usar um gancho chamado usar Vibrar de @vueuse/core.

import { useVibrate } from ‘@vueuse/core’ // Vibra o dispositivo por 300 ms, espera 100 ms, vibra por 300 ms const pattern = [300, 100, 300]
const { vibrate, stop, isSupported } = useVibrate({ pattern }) vibrate() // irá parar após o padrão terminar stop() // parar a vibração imediatamente

Next.js e vibração React

Em Next.js e React, você pode usar a API Web Vibration diretamente em componentes funcionais. Aqui está um exemplo de como você pode criar um gancho personalizado para lidar com vibrações:

Ler:  Descubra os 10 melhores plug-ins de experiência do usuário para WordPress e o que eles podem fazer pelo seu site

“usar cliente” importar { useCallback } de ‘react’; função de exportação useVibration(padrão) { const vibrate = useCallback(() => { if (‘vibrar’ no navegador) { navigator.vibrate(pattern); } }, [pattern]); retornar vibrar; }

Você pode então usar esse gancho em seus componentes para acionar vibrações com base nas interações do usuário ou em outros eventos.

Caso contrário, aqui está um exemplo de como você pode criar um botão que vibra quando clicado:

‘use client’ // Só é possível nos componentes do navegador e do cliente function VibrateButton({ pattern }) { const handleClick = () => { if (‘vibrate’ in navigator) { navigator.vibrate(pattern); } }; return ( ); } // Use o componente VibrateButton em seu aplicativo

jQuery.vibrate.js

Se fazer isso manualmente parece difícil para você, escrevi um plugin jquery que pode ajudá-lo a começar imediatamente.

Baixe e incorpore o código em seguida, inicialize de uma das seguintes maneiras:

// Vibração por 50ms em todos os .button ao clicar $(‘.button’).vibrate() // Vibrar por 20ms ao clicar $(‘.button’).vibrate(‘short’) // Vibrar por 50ms ao clicar $(‘.button’).vibrate(‘medium’) $(‘.button’).vibrate(‘default’) $(‘.button’).vibrate(50) // Vibra por 100 ms ao clicar $(‘ .button’).vibrate(‘long’) // Vibra por 1000ms no touchstart. Pare de vibrar no touchend. $(‘.button’).vibrate({ duração: 1000, gatilho: ‘touchstart’, })

Também fiz uma apresentação de slides: Saiba mais sobre a API de vibração de Illyismo. Sinta-se à vontade para compartilhá-lo e mostrá-lo.

Interessado em mais artigos sobre Javascript e CSS? Confira nosso artigo sobre gradientes de texto CSS.

Novas publicações:

Recomendação