Vibration API: Controlar la Vibración del Dispositivo en JavaScript
Aprende a usar la API Vibration para controlar el motor de vibración de dispositivos móviles, crear patrones de vibración personalizados y mejorar la experiencia táctil de tus aplicaciones web.
TL;DR - Resumen rápido
- La API Vibration está disponible en navigator.vibrate()
- Solo funciona en dispositivos con motor de vibración (principalmente móviles)
- Acepta un número (milisegundos) o un array para patrones
- Los patrones de vibración alternan entre vibrar y pausar
- navigator.vibrate(0) cancela cualquier vibración activa
Introducción a la API Vibration
La API Vibration permite a las aplicaciones web controlar el motor de vibración del dispositivo, proporcionando retroalimentación táctil al usuario. Esta capacidad es especialmente útil en dispositivos móviles donde la vibración puede mejorar significativamente la experiencia de usuario en contextos como notificaciones, confirmaciones de acciones y juegos.
La API es sorprendentemente simple: un único método navigator.vibrate()que acepta un valor numérico o un array de valores. A pesar de su simplicidad, permite crear patrones de vibración complejos y expresivos que pueden comunicar diferentes tipos de información al usuario.
- Aplicaciones de <strong>notificaciones</strong> para alertas silenciosas
- Juegos para <strong>feedback táctil</strong> en acciones y eventos
- Formularios para <strong>confirmación de envío</strong> exitoso
- Interfaces de <strong>accesibilidad</strong> para usuarios con discapacidad visual
- Aplicaciones de <strong>productividad</strong> para recordatorios y alarmas
Disponibilidad limitada
La API Vibration solo funciona en dispositivos con motor de vibración, principalmente teléfonos móviles y tablets. En computadoras de escritorio y laptops, la llamada a navigator.vibrate() simplemente no tiene efecto, pero no genera errores.
Vibración Básica
El uso más simple de la API Vibration es pasar un número entero que representa la duración de la vibración en milisegundos. El dispositivo vibrará durante el tiempo especificado y luego se detendrá automáticamente.
Vibración con Duración Específica
El método navigator.vibrate() acepta un número que representa la duración de la vibración en milisegundos. El valor máximo permitido varía según el dispositivo, pero generalmente está entre 5 y 10 segundos.
Este código muestra cómo vibrar el dispositivo por una duración específica. La vibración es síncrona en el sentido de que la llamada retorna inmediatamente, pero la vibración continúa en segundo plano hasta que se completa la duración especificada.
Límites de duración
Los navegadores pueden limitar la duración máxima de la vibración. Por ejemplo, Chrome limita las vibraciones a un máximo de 5 segundos. Si especificas una duración mayor, el navegador la truncará al límite permitido.
Verificar Soporte de Vibración
Antes de usar la API Vibration, es una buena práctica verificar que el dispositivo soporte vibración. Aunque la llamada no generará errores en dispositivos sin soporte, verificar antes puede ayudarte a proporcionar una experiencia alternativa.
Este código muestra cómo verificar si la API Vibration está disponible. La verificación es simple: solo necesitas comprobar si "vibrate" existe en el objetonavigator. A diferencia de otras APIs, llamar a navigator.vibrate()en un dispositivo sin soporte no genera errores, simplemente no hace nada.
Patrones de Vibración
El verdadero poder de la API Vibration está en los patrones. Puedes pasar un array de números para crear secuencias de vibración y pausas. Los valores en posiciones pares (0, 2, 4...) representan duraciones de vibración, mientras que los valores en posiciones impares (1, 3, 5...) representan pausas.
Patrón de Vibración Básico
Un patrón de vibración es un array de números que alternan entre vibrar y pausar. Por ejemplo, [200, 100, 200] significa: vibrar 200ms, pausar 100ms, vibrar 200ms.
Este código muestra cómo crear un patrón de vibración simple. El patrón consiste en dos vibraciones cortas separadas por una pausa breve, ideal para notificaciones discretas o confirmaciones de acciones. Los patrones de vibración pueden comunicar diferentes tipos de información: un patrón corto indica confirmación, mientras que un patrón largo y repetitivo indica una alerta importante.
Patrones de Vibración Complejos
Puedes crear patrones más complejos con múltiples vibraciones y pausas. Los patrones complejos son útiles para comunicar información más detallada o para crear efectos especiales en juegos.
Este código muestra varios patrones de vibración complejos para diferentes situaciones. Los patrones bien diseñados pueden mejorar significativamente la experiencia de usuario: usa una vibración corta y rápida para confirmación, tres vibraciones cortas en secuencia para errores, una vibración larga seguida de dos cortas para notificaciones importantes, y un patrón rítmico repetitivo para llamadas entrantes.
Patrones Repetitivos
Los patrones de vibración se pueden repetir automáticamente si el último elemento del array es positivo. Esto es útil para alertas persistentes como alarmas o llamadas entrantes.
Este código muestra cómo crear un patrón de vibración repetitivo. Al terminar el array con un número positivo, el patrón se repite indefinidamente hasta que se cancela explícitamente con navigator.vibrate(0).
Siempre cancela patrones repetitivos
Los patrones repetitivos continúan hasta que se cancelan explícitamente. Siempre debes cancelarlos cuando ya no sean necesarios, especialmente cuando el usuario abandona la página (usa beforeunload), para evitar consumir batería innecesariamente.
Cancelar Vibración
Puedes cancelar cualquier vibración activa o patrón en ejecución llamando anavigator.vibrate(0). Esto detiene inmediatamente la vibración y cancela cualquier patrón que esté en ejecución.
Cancelar Vibración Activa
Llamar a navigator.vibrate(0) cancela cualquier vibración activa inmediatamente. Esto es útil cuando necesitas detener una vibración en respuesta a una acción del usuario o cuando el usuario abandona la página.
Este código muestra cómo cancelar una vibración activa. La funcióncancelarVibracion() puede llamarse en cualquier momento para detener la vibración, incluso si está en medio de un patrón complejo. Siempre cancela las vibraciones cuando el usuario abandona la página usando beforeunload.
Compatibilidad y Limitaciones
La API Vibration tiene algunas limitaciones importantes que debes conocer. La compatibilidad varía entre navegadores y dispositivos, y hay restricciones sobre cuándo y cómo se puede usar la vibración.
Compatibilidad con Dispositivos
La compatibilidad de la API Vibration varía significativamente entre dispositivos. Mientras que la mayoría de los teléfonos móviles modernos la soportan, los dispositivos de escritorio generalmente no tienen motor de vibración.
Este código muestra cómo verificar la compatibilidad y proporcionar una experiencia alternativa en dispositivos que no soportan vibración. La API está diseñada para fallar silenciosamente en dispositivos sin soporte, por lo que no necesitas manejar errores especiales; simplemente verifica la disponibilidad y proporciona feedback visual alternativo cuando sea necesario.
Resumen: Vibration API
Conceptos principales:
- •navigator.vibrate(ms) vibra el dispositivo por milisegundos especificados
- •navigator.vibrate([array]) crea patrones de vibración
- •Los patrones alternan entre vibrar (índices pares) y pausar (índices impares)
- •navigator.vibrate(0) cancela cualquier vibración activa
- •Solo funciona en dispositivos con motor de vibración
Mejores prácticas:
- •Siempre verifica la compatibilidad antes de usar la API
- •Usa patrones de vibración para comunicar diferentes tipos de información
- •Cancela vibraciones cuando el usuario abandona la página
- •Proporciona feedback visual alternativo en dispositivos sin soporte
- •Usa HTTPS en producción para garantizar el funcionamiento