Une IA lit vos émotions sur votre visage en temps réel et joue un son différent pour chaque expression détectée — sourire, surprise, colère, chaque mimique devient une note.
Vue d’ensemble
Face music observe votre visage via la webcam et détecte en direct sept émotions — joie, tristesse, colère, peur, dégoût, surprise, neutre — grâce à un réseau de neurones qui tourne entièrement dans le navigateur. Chaque fois qu’une émotion se déclenche (par un pic soudain d’intensité ou par le simple fait d’être maintenue quelques instants), un échantillon audio dédié se joue, accompagné d’une salve de particules et d’un HUD façon viseur qui encadre chaque visage détecté à l’écran.
L’appli gère plusieurs visages simultanément, chacun suivi indépendamment avec son propre historique et son propre temps de recharge par émotion, et affiche en direct des barres de progression, une timeline des déclenchements et un curseur de sensibilité pour ajuster la nervosité de la détection.
Fonctionnalités
- Détection de 7 émotions — joie, tristesse, colère, peur, dégoût, surprise et neutre, chacune associée à un son, une couleur et une icône.
- Suivi multi-visages — chaque visage détecté est suivi individuellement d’une frame à l’autre, avec son propre lissage et ses propres temps de recharge.
- Deux modes de déclenchement — un pic brutal d’émotion la déclenche immédiatement, ou une expression tenue quelques frames la déclenche en mode « soutenu ».
- HUD façon viseur — un cadre à coins lumineux encadre chaque visage détecté, avec particules animées à chaque déclenchement.
- Barres d’émotion et timeline en direct — panneau latéral qui affiche l’intensité de chaque émotion, le compteur de déclenchements et l’historique de la session.
- Curseur de sensibilité — ajuste en direct les seuils de détection pour rendre l’appli plus ou moins réactive.
Sous le capot
La détection tourne sur deux boucles indépendantes : une boucle d’analyse (face-api.js, modèles tinyFaceDetector + faceExpressionNet chargés localement) qui tourne toutes les 150 à 250 ms selon l’appareil, et une boucle de rendu à requestAnimationFrame qui dessine le HUD et anime les particules sans jamais attendre l’analyse — l’affichage reste fluide même quand la détection ralentit. Chaque visage est réassocié d’une frame à l’autre par proximité de position, ce qui permet à chaque personne de conserver son propre historique et son propre temps de recharge même si elle bouge dans le cadre.
Pour éviter les faux déclenchements, les scores d’émotion sont lissés par moyenne mobile exponentielle avant d’être comparés à un seuil, et un déclenchement n’est validé que si le score dépasse un minimum de confiance, avec une marge suffisante sur la deuxième émotion la plus probable — les émotions les plus « bruitées » à détecter (peur, dégoût) ont leurs propres seuils, plus stricts que les autres. Côté son, chaque déclenchement lance un échantillon Web Audio en fondu, en coupant en douceur la note précédente pour qu’une seule joue à la fois.
Stack technique
- Vanilla JS, zéro framework
- face-api.js — détection de visage (tinyFaceDetector) et reconnaissance d’expressions (faceExpressionNet), modèles servis localement
- getUserMedia — capture webcam
- Web Audio API — lecture des échantillons sonores par émotion, avec fondu enchaîné
- Canvas 2D — HUD viseur et système de particules
Cas d’usage
Une démo ludique et immédiate pour un stand ou un portfolio interactif : chacun peut essayer de « jouer » sa propre partition en enchaînant les grimaces, seul ou à plusieurs devant la même caméra.
Votre visage est l’instrument, vos émotions sont les notes.
