Spin And Wheel

Cómo usar la ruleta

Esta guía documenta las 17 acciones visibles del sorteo aleatorio Spin and Wheel — una herramienta en el navegador que asigna a cada entrada un arco igual sobre una ruleta HTML5 Canvas, generando una probabilidad de selección de 1/N. La página incluye un inicio rápido en tres pasos y una referencia detallada de cada botón, interruptor y atajo de teclado de la ruleta principal.

Abrir la ruleta

Inicio rápido

  1. Añade tus entradas

    Escribe o pega tu lista en el cuadro de Entradas — una por línea. Nombres, opciones, tareas, premios… cualquier cosa que quieras sortear. No hay límite superior salvo la capacidad del localStorage del navegador (típicamente 5 MB por origen).

  2. Gira la ruleta

    Haz clic en el botón de girar debajo de la ruleta o directamente en la ruleta. El giro dura 3.5 segundos por defecto (de 2 a 15 segundos en Personalizar) y cae en una entrada al azar con probabilidad 1/N: el punto de parada lo decide el generador aleatorio criptográficamente seguro del navegador, así que todas las entradas tienen la misma posibilidad, estén donde estén en la ruleta.

  3. Usa el resultado

    El ganador aparece en una ventana. Puedes volver a girar, eliminar al ganador de la lista o cerrar la ventana — los ganadores se registran automáticamente en la pestaña Ganadores.

Todas las acciones disponibles

Edición de entradas

Cuadro de entradas

El cuadro de Entradas contiene la lista entre la que elige la ruleta — un elemento por línea, con un contador en vivo que muestra el número de filas no vacías. Cada entrada ocupa un arco de 360°/N de la ruleta, por lo que la probabilidad de selección es exactamente 1/N, independientemente de la longitud o la posición. No hay límite superior salvo la capacidad del localStorage del navegador (típicamente 5 MB por origen).

Truco: pega una columna de hoja de cálculo para añadir muchas entradas a la vez.

Mezclar

Reordena aleatoriamente todas las entradas. Útil para cambiar los vecinos en la ruleta entre giros o eliminar el orden de una lista ya ordenada.

Mezclar no cambia la probabilidad: cada entrada sigue con 1/N.

Ordenar

Ordena las entradas alfabéticamente (A–Z). Útil para limpiar una lista pegada larga o agrupar entradas similares antes de compartir la ruleta.

Igual que Mezclar, ordenar solo cambia la visualización, no la equidad.

Limpiar

Elimina todas las entradas en un clic. La ruleta queda vacía y puedes empezar una lista nueva.

Las listas borradas no se pueden recuperar — comparte el enlace antes si quieres conservarla.

Giro y resultados

Girar (Rotar la ruleta)

Inicia el giro con una desaceleración easeOutQuart. Dura 3,500 ms por defecto; Personalizar ofrece 2, 3.5, 6, 10 o 15 segundos, y el número de vueltas crece con la duración. El ángulo de parada se elige con crypto.getRandomValues antes de que empiece la animación. Hay dos formas de girar: el botón debajo de la ruleta y un clic sobre la ruleta. La caja de Entradas se bloquea mientras gira, así que la lista no puede cambiar a mitad del giro.

La duración es solo el espectáculo: el resultado ya está decidido antes de que la ruleta se mueva, así que un giro corto o largo no favorece a nadie.

Pestaña Ganadores

Cada ganador se añade automáticamente a la pestaña Ganadores. Cambia de pestaña para ver el historial completo, con un contador que indica cuántos ganadores se han elegido.

Usa el botón Limpiar en la pestaña Ganadores para reiniciar el historial sin tocar tus entradas.

Eliminar ganador / Usar como entradas

En la ventana del ganador, el botón Eliminar quita la entrada ganadora — perfecto para sorteos donde cada nombre debe ganar solo una vez. El botón Usar como entradas (pestaña Ganadores) devuelve todos los ganadores a la lista de giro.

Combina ambos para rondas de eliminación: girar, eliminar, repetir.

Giro automático

Tras mostrar un ganador, la ventana puede activar el siguiente giro automáticamente. Marca la casilla y ajusta la cuenta atrás en segundos. El temporizador se reinicia con cada nuevo ganador.

Cuenta atrás por defecto: 30 segundos — ajústala al ritmo de tu evento.

Reproducción y pantalla

Control por voz (girar con la voz)

Gira sin manos: abre Ajustes (el engranaje junto a Añadir entradas), activa el control por voz, permite el acceso al micrófono y di tu comando en voz alta — 'Wheel spin' por defecto — para girar sin tocar la pantalla. El reconocimiento de voz usa la API Web Speech del navegador y sigue el idioma de la página; una insignia de micrófono se pone verde cuando tus palabras coinciden y roja cuando no.

Define tu propio comando en Ajustes (cualquier frase) y usa Chrome o Edge para mejores resultados; la opción se oculta en navegadores sin reconocimiento de voz.

Anuncio por voz del ganador

Cuando está activada, el nombre del ganador se lee en voz alta mediante la Web Speech API del navegador (interfaz SpeechSynthesis, especificación del W3C Community Group). La voz y el idioma se seleccionan automáticamente para coincidir con el idioma activo de la interfaz. El estado del interruptor en la ventana del ganador se guarda en localStorage como voiceOver_.

La calidad y el idioma de la voz dependen de las voces instaladas en tu sistema.

Sonido de giro

Suena un tic cada vez que una sección pasa por el indicador, y se vuelve más lento con la ruleta. En Personalizar eliges el sonido al girar (Tic, Clic o Suave), un sonido del ganador que se escucha al detenerse (Campanas, Fanfarria o Ninguno) y el volumen. El ícono de bocina del encabezado silencia todos los sonidos de la ruleta y recuerda tu elección. Con la Voz activada, el nombre se lee cuando termina el sonido del ganador.

Silénciala con la bocina del encabezado en el salón de clases o la oficina; tus sonidos quedan guardados para la próxima vez.

Personalizar (colores, duración, sonidos, confeti)

El botón de la paleta junto al engrane de Ajustes abre Personalizar: 8 temas de color (Clásico, Pastel, Océano, Atardecer, Neón, Bosque, Mono, Arcoíris; el texto cambia a negro o blanco para que se lea bien), duración del giro, sonidos al girar y del ganador con volumen, y confeti opcional en cada resultado (apagado por defecto y omitido si el dispositivo pide reducir el movimiento). Todo se guarda en este navegador, viaja con los enlaces de Compartir código QR, y en OBS el panel de control lo envía a la ruleta que se ve en la transmisión.

Ninguna de estas opciones cambia las probabilidades. Restablecer valores predeterminados vuelve al estilo clásico. Plantillas y todas las opciones juntas: Ruleta personalizada.

Modo pantalla completa

Pulsar el icono de pantalla completa en la cabecera invoca la Fullscreen API del navegador (Element.requestFullscreen()), expandiendo el canvas de la ruleta a todo el viewport. Compatible con todos los navegadores evergreen (Chrome, Edge, Firefox, Safari 16.4+) — ideal para presentaciones, proyectores y compartir pantalla en videollamadas.

Pulsa Esc para salir de pantalla completa en cualquier momento.

Persistencia e idioma

Guardado automático de listas

Las entradas se guardan automáticamente en el localStorage del navegador (Web Storage API, recomendación del W3C), con una clave por idioma: mainInput_en, mainInput_fr, etc. El almacenamiento sobrevive al cierre de la pestaña, al reinicio del navegador y de la máquina, hasta que el usuario borre los datos del sitio. La capacidad por origen es típicamente de 5 MB, suficiente para decenas de miles de entradas.

Guardado por idioma: pasar a inglés te da una lista en inglés independiente.

Compartir por enlace

La barra de direcciones no cambia mientras escribes. Para compartir la ruleta, pulsa Compartir código QR en la parte superior del formulario de entradas: se crea un enlace con tus entradas en el parámetro ?entries= y los cambios de Personalizar en ?cfg=, y se muestra como código QR con un botón Copiar enlace. Quien abre el enlace ve la misma lista y el mismo aspecto en su dispositivo, sin ninguna llamada al servidor. Una lista compartida se abre sin reemplazar la lista guardada de quien la recibe, los cambios hechos en ella no se guardan, y el aspecto compartido solo vale para esa visita; se guarda cuando se cambia algún ajuste. El tamaño de la lista solo está limitado por las longitudes de URL del navegador (~2.000 caracteres en clientes antiguos, ~32.000 en Chromium moderno).

Sin cuentas ni servidores: la lista vive dentro de la propia URL.

Compartir por código QR

Haz clic en el botón Compartir código QR en la parte superior del formulario de entradas para abrir una ventana con un código QR escaneable. El código contiene la URL actual con las entradas añadidas, así que cualquier persona que lo escanee con su cámara abrirá exactamente la misma ruleta con la misma lista. La ventana también muestra el enlace completo y un botón Copiar enlace si prefieres pegar la dirección en un chat, correo o presentación.

Perfecto para aulas y eventos: estudiantes o invitados escanean el código en pantalla y abren la ruleta en su propio dispositivo con un solo toque.

Selector de idioma

La ruleta está disponible en 12 idiomas: inglés, francés, español, japonés, portugués, alemán, polaco, coreano, hindi, indonesio, ucraniano y hebreo (de derecha a izquierda). Elige el idioma en el pie de página — toda la interfaz, incluida la voz, cambia al instante.

Cada idioma conserva su propia lista guardada, sin sobrescribir las demás.

Cómo usar la ruleta como superposición en directo en OBS Studio

Puedes mostrar la ruleta en directo en tu stream dentro de OBS Studio en dos partes: una ruleta que se coloca sobre tu escena y un pequeño panel de control anclado dentro de OBS donde editas los nombres y giras. No hay que instalar programas adicionales ni crear una cuenta — ambas partes funcionan dentro de OBS en el mismo ordenador.

La disposición de OBS en dos partes

La ruleta en tu escena

Añade la ruleta a tu escena con el enlace de pantalla. Aparece sobre un fondo transparente, así que solo se ve la ruleta sobre tu webcam o tu juego, sin recuadro. Un tamaño cuadrado como 800 × 800 funciona mejor.

Muévela y cambia su tamaño donde quieras en la escena; la zona alrededor de la ruleta queda transparente sobre tus otras fuentes.

El panel de control dentro de OBS

Añade el enlace del dock como panel dentro de OBS para editar nombres, girar y ver ganadores sin salir de OBS ni cambiar a una pestaña del navegador.

Si el panel desaparece, vuelve a activarlo desde el menú Docks en la parte superior de OBS.

Todo se queda en tu ordenador

El panel de control y la ruleta en pantalla están conectados dentro de OBS, así que un giro aparece al instante en el directo. No se envía nada a un servidor — ambas partes solo tienen que ejecutarse en el mismo OBS en un ordenador.

Pulsa Girar la ruleta en el panel y la ruleta en pantalla gira al momento; cada ganador se añade a la lista de Ganadores del panel.

Sonido, voz en off y regiro automático

Activa Controlar el audio mediante OBS al añadir la ruleta para que los espectadores oigan el tictac. Desde el panel también puedes hacer que cada ganador se anuncie en voz alta y que el siguiente giro empiece automáticamente.

Puedes silenciar la ruleta desde el mezclador de audio de OBS en cualquier momento.

Abrir la guía completa de configuración de OBS
Probar la ruleta ahora