Comment utiliser la roue

Ce guide documente les 14 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 Tourner sous la roue, ou directement sur le canvas de la roue. La rotation dure 3,5 secondes avec une courbe de décélération easeOutQuart et s'arrête sur une entrée aléatoire avec une probabilité de 1/N — chaque entrée a exactement la même chance, indépendamment de sa position 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 — partagez l'URL avant pour en garder une copie.

Tirage et résultats

Tourner (lancer la roue)

Démarre l'animation de rotation, fixée à 3 500 ms avec une courbe de décélération easeOutQuart pour garantir une sensation cohérente et l'équité du résultat. Deux déclencheurs : le bouton Tourner sous la roue et un clic direct sur le canvas. La zone Entrées est désactivée pendant la rotation pour empêcher toute modification de la liste en cours, qui invaliderait le calcul de probabilité.

La durée d'animation est volontairement fixe pour qu'aucune entrée ne soit favorisé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

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, parmi les sept locales prises en charge. 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 cliquetis se fait entendre pendant la rotation, comme une vraie roue de la fortune. Activez ou coupez-le grâce à l'icône haut-parleur dans l'en-tête — le réglage est mémorisé entre les sessions.

Coupez-le en classe ou au bureau quand l'environnement sonore compte.

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

L'URL est mise à jour à chaque frappe via la History API (history.replaceState), encodant la liste d'entrées dans un paramètre de requête sécurisé. Partager l'adresse transfère l'état de la roue sans aucun appel serveur — le destinataire ouvre le lien et voit la même configuration sur son appareil. La taille de 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 7 langues : anglais, français, espagnol, japonais, portugais, allemand et polonais. 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