Comment utiliser la roue

Ce guide documente les 17 actions visibles du tirage aléatoire Spin and Wheel — un outil dans le navigateur qui attribue à chaque entrée un arc égal sur une roue HTML5 Canvas, produisant une probabilité de sélection de 1/N. La page contient un démarrage rapide en trois étapes et une référence détaillée pour chaque bouton, bascule et raccourci de la roue principale.

Ouvrir la roue

Démarrage rapide

Ajoutez vos entrées

Tapez ou collez votre liste dans la zone Entrées — un élément par ligne. Noms, options, tâches, lots… tout ce que vous voulez tirer au sort. Aucune limite supérieure au-delà de la capacité localStorage du navigateur (environ 5 Mo par origine).
Faites tourner la roue

Cliquez sur le bouton de rotation sous la roue, ou directement sur la roue. La rotation dure 3,5 secondes par défaut (de 2 à 15 secondes dans « Personnaliser ») et s'arrête sur une entrée au hasard avec une probabilité de 1/N : le point d'arrêt vient du générateur aléatoire cryptographiquement sûr du navigateur, donc chaque entrée a la même chance, quelle que soit sa place sur la roue.
Utilisez le résultat

Le gagnant apparaît dans une fenêtre. Vous pouvez relancer, retirer le gagnant de la liste ou fermer la fenêtre — vos gagnants sont automatiquement enregistrés dans l'onglet Gagnants.

Toutes les actions disponibles

Édition des entrées

Zone des entrées

La zone Entrées contient la liste parmi laquelle la roue choisit — un élément par ligne, avec un compteur en direct du nombre de lignes non vides. Chaque entrée occupe un arc de 360°/N de la roue, donnant exactement une probabilité de sélection de 1/N, indépendamment de la longueur du texte ou de la position. Aucune limite supérieure au-delà de la capacité localStorage du navigateur (environ 5 Mo par origine).

Astuce : collez une colonne de tableur pour ajouter en masse de nombreuses entrées.

Mélanger

Réorganise aléatoirement toutes les entrées de la zone de texte. Pratique pour changer le voisinage des éléments sur la roue entre deux tours ou casser l'ordre d'une liste triée.

Mélanger ne change pas la probabilité — chaque entrée garde une chance de 1/N.

Trier

Classe les entrées par ordre alphabétique (A–Z). Utile pour ranger une longue liste collée ou regrouper des entrées similaires avant de partager la roue.

Comme le mélange, le tri ne change que l'affichage, pas l'équité.

Effacer

Supprime toutes les entrées en un clic. La roue devient vide et vous pouvez recommencer une liste.

Une liste effacée n'est pas récupérable — copiez d'abord un lien avec « Partager le QR code » pour la conserver.

Tirage et résultats

Tourner (lancer la roue)

Lance la rotation avec une décélération easeOutQuart. Elle dure 3 500 ms par défaut ; « Personnaliser » propose 2, 3,5, 6, 10 ou 15 secondes, et le nombre de tours augmente avec la durée. L'angle d'arrêt est tiré avec crypto.getRandomValues avant le début de l'animation. Deux déclencheurs : le bouton sous la roue et un clic sur la roue. La zone « Entrées » est verrouillée pendant la rotation, la liste ne peut donc pas changer en cours de tirage.

La durée n'est que du spectacle : le résultat est fixé avant que la roue bouge, une rotation courte ou longue ne favorise aucune entrée.

Onglet Gagnants

Chaque gagnant est ajouté automatiquement à l'onglet Gagnants. Changez d'onglet pour voir l'historique complet, avec un compteur affichant le nombre total de gagnants tirés.

Utilisez le bouton Effacer de l'onglet Gagnants pour réinitialiser l'historique sans toucher à vos entrées.

Retirer le gagnant / Utiliser comme entrées

Dans la fenêtre de gagnant, le bouton Retirer enlève l'entrée gagnante de la roue — parfait pour les tirages où chaque nom ne doit gagner qu'une fois. Le bouton Utiliser comme entrées (onglet Gagnants) replace tous les gagnants dans la liste de tirage.

Combinez les deux pour des tours d'élimination : tirer, retirer, recommencer.

Tour automatique

Après l'affichage d'un gagnant, la fenêtre peut déclencher automatiquement le tour suivant. Activez la case et réglez le compte à rebours en secondes. Le décompte repart à chaque nouveau gagnant.

Décompte par défaut : 30 secondes — ajustez-le au rythme de votre événement.

Lecture et affichage

Commande vocale (tourner à la voix)

Tournez sans les mains : ouvrez les Paramètres (l'engrenage à côté d'Ajouter des entrées), activez la commande vocale, autorisez le micro, puis dites votre commande à voix haute — 'Wheel spin' par défaut — pour tourner sans toucher l'écran. La reconnaissance vocale utilise l'API Web Speech du navigateur et suit la langue de la page ; un badge micro devient vert quand vos mots correspondent, rouge sinon.

Définissez votre propre commande dans les Paramètres (n'importe quelle phrase) et utilisez Chrome ou Edge pour de meilleurs résultats ; l'option est masquée sur les navigateurs sans reconnaissance vocale.

Annonce vocale du gagnant

Lorsque l'option est activée, le nom du gagnant est lu à voix haute par la Web Speech API du navigateur (interface SpeechSynthesis, spécification W3C Community Group). La voix et la langue sont sélectionnées automatiquement pour correspondre à la langue active de l'interface. L'état de la bascule dans la fenêtre de gagnant est conservé dans localStorage sous voiceOver_.

La qualité et la langue de la voix dépendent des voix installées sur votre système.

Son de rotation

Un tic retentit à chaque part qui passe devant le pointeur et ralentit avec la roue. Dans « Personnaliser », choisissez le son du tirage (Tic, Clic ou Doux), un son du gagnant joué à l'arrêt (Carillon, Fanfare ou Aucun) et le volume. L'icône haut-parleur de l'en-tête coupe tous les sons de la roue ; le choix est mémorisé. Avec la voix activée, le prénom est lu après le son du gagnant.

Coupez le son avec le haut-parleur de l'en-tête en classe ou au bureau ; vos réglages de son restent enregistrés.

Personnaliser (couleurs, durée, sons, confettis)

Le bouton palette à côté de la roue dentée « Paramètres » ouvre « Personnaliser » : 8 thèmes de couleurs (Classique, Pastel, Océan, Coucher de soleil, Néon, Forêt, Mono, Arc-en-ciel ; le texte passe en noir ou en blanc pour rester lisible), durée de rotation, sons du tirage et du gagnant avec le volume, et des confettis à chaque tirage si vous les activez (désactivés par défaut, et jamais affichés si l'appareil demande de réduire les animations). Les choix sont enregistrés dans ce navigateur, suivent les liens « Partager le QR code », et dans OBS le panneau de contrôle les envoie à la roue affichée en direct.

Aucun de ces réglages ne change les chances. « Rétablir les réglages par défaut » remet le style classique. Modèles et toutes les options réunis : Roue personnalisable.

Mode plein écran

Cliquer sur l'icône plein écran dans l'en-tête invoque la Fullscreen API du navigateur (Element.requestFullscreen()), étendant le canvas de la roue à tout le viewport. Pris en charge par tous les navigateurs evergreen (Chrome, Edge, Firefox, Safari 16.4+) — idéal pour les présentations, vidéoprojecteurs et partages d'écran en visio.

Appuyez sur Échap pour quitter le plein écran à tout moment.

Persistance et langue

Sauvegarde des listes (auto)

Les entrées sont enregistrées automatiquement dans le localStorage du navigateur (Web Storage API, recommandation W3C), avec une clé par langue : mainInput_en, mainInput_fr, etc. Le stockage survit à la fermeture de l'onglet, au redémarrage du navigateur et de la machine, jusqu'à effacement des données du site. La capacité par origine est généralement de 5 Mo, soit des dizaines de milliers d'entrées.

Sauvegarde par langue : passer en anglais vous donne une liste anglaise distincte.

Partage par lien

La barre d'adresse ne change pas pendant la saisie. Pour partager la roue, cliquez sur « Partager le QR code » en haut du formulaire d'entrées : un lien est créé avec vos entrées dans le paramètre ?entries= et vos réglages « Personnaliser » modifiés dans ?cfg=, puis affiché sous forme de QR code avec un bouton « Copier le lien ». La personne qui ouvre le lien retrouve la même liste et le même style sur son appareil, sans aucun appel serveur. Une liste partagée s'ouvre sans remplacer la liste enregistrée de cette personne, les modifications faites sur ce lien ne sont pas enregistrées, et le style partagé ne vaut que pour cette visite ; il n'est enregistré qu'au premier réglage modifié. La taille de la liste n'est limitée que par les longueurs d'URL des navigateurs (~2 000 caractères sur les anciens clients, ~32 000 sur Chromium moderne).

Sans compte, sans serveur — la liste vit directement dans l'URL.

Partage par QR code

Cliquez sur le bouton Partager le QR code en haut du formulaire d'entrées pour ouvrir une fenêtre avec un QR code scannable. Le code encode l'URL actuelle, y compris les entrées ajoutées, afin qu'une personne qui le scanne avec son téléphone ouvre exactement la même roue avec la même liste. La fenêtre affiche aussi le lien complet et un bouton Copier le lien si vous préférez le coller dans un message, un e-mail ou une présentation.

Idéal en classe ou en événement — les élèves ou invités scannent le code à l'écran et ouvrent la roue sur leur appareil en un seul geste.

Sélecteur de langue

La roue est disponible en 12 langues : anglais, français, espagnol, japonais, portugais, allemand, polonais, coréen, hindi, indonésien, ukrainien et hébreu (affiché de droite à gauche). Choisissez la langue dans le pied de page — toute l'interface, y compris l'annonce vocale, change instantanément.

Chaque langue conserve sa propre liste sauvegardée, sans écraser les autres.

Comment utiliser la roue en superposition live dans OBS Studio

Vous pouvez afficher la roue en direct sur votre stream dans OBS Studio en deux parties : une roue posée par-dessus votre scène, et un petit panneau de contrôle ancré dans OBS où vous modifiez les noms et lancez la roue. Aucun logiciel supplémentaire à installer, aucun compte — les deux parties fonctionnent dans OBS sur le même ordinateur.

La disposition OBS en deux parties

La roue sur votre scène

Ajoutez la roue à votre scène à l'aide du lien d'affichage. Elle apparaît sur un fond transparent : seule la roue se voit par-dessus votre webcam ou votre jeu, sans cadre. Une taille carrée comme 800 × 800 fonctionne le mieux.

Déplacez-la et redimensionnez-la où vous voulez sur la scène ; la zone autour de la roue reste transparente par-dessus vos autres sources.

Le panneau de contrôle dans OBS

Ajoutez le lien du dock comme panneau dans OBS pour modifier les noms, lancer la roue et voir les gagnants sans quitter OBS ni passer à un onglet de navigateur.

Si le panneau disparaît, réactivez-le depuis le menu Docks en haut d'OBS.

Tout reste sur votre ordinateur

Le panneau de contrôle et la roue à l'écran sont liés dans OBS : un lancer apparaît instantanément sur le stream. Rien n'est envoyé à un serveur — les deux parties doivent simplement tourner dans le même OBS sur un seul ordinateur.

Appuyez sur Tourner la roue dans le panneau et la roue à l'écran tourne aussitôt ; chaque gagnant est ajouté à la liste Gagnants du panneau.

Son, annonce vocale et re-tirage automatique

Cochez Contrôler l'audio via OBS au moment d'ajouter la roue pour que les spectateurs entendent le tic-tac. Depuis le panneau, vous pouvez aussi faire annoncer chaque gagnant à voix haute et lancer automatiquement le tour suivant.

Vous pouvez couper la roue depuis le mélangeur audio d'OBS à tout moment.

Ouvrir le guide complet de configuration OBS

Essayer la roue maintenant