Code B3

Appearance

Speech recognition

Le principe des web sockets
Le principe des web sockets

La Web Speech API permet de faire de la reconnaissance vocale directement dans le navigateur, sans serveur externe.

Compatibilité navigateurs ​

NavigateurSupportNotes
Safari✅ OuiFonctionne bien, utilise webkitSpeechRecognition
Chrome✅ OuiNécessite HTTPS ou localhost
Firefox❌ NonNon supporté nativement
Edge✅ OuiBasé sur Chromium

Recommandation

Pour un projet qui doit fonctionner offline ou en local, Safari est le meilleur choix car il ne nécessite pas de connexion HTTPS.

Code de base ​

javascript
// Vérifier le support
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;

if (!SpeechRecognition) {
  console.error('Web Speech API non supportée');
  return;
}

// Créer l'instance
const recognition = new SpeechRecognition();
recognition.lang = 'fr-FR';        // Langue française
recognition.continuous = true;      // Écoute continue
recognition.interimResults = true;  // Résultats intermédiaires

// Événements
recognition.onstart = () => {
  console.log('🎤 Écoute en cours...');
};

recognition.onresult = (event) => {
  let transcript = '';
  for (let i = event.resultIndex; i < event.results.length; i++) {
    transcript += event.results[i][0].transcript;
  }
  console.log('Entendu:', transcript);
};

recognition.onerror = (event) => {
  console.error('Erreur:', event.error);
};

recognition.onend = () => {
  console.log('Reconnaissance terminée');
};

// Démarrer
recognition.start();

Ce qui fonctionne ​

Reconnaissance continue ​

Avec continuous: true, la reconnaissance ne s'arrête pas après la première phrase.

javascript
recognition.continuous = true;

Résultats intermédiaires ​

Avec interimResults: true, on reçoit le texte au fur et à mesure qu'on parle (pas besoin d'attendre la fin de la phrase).

javascript
recognition.interimResults = true;

Langues supportées ​

On peut spécifier la langue avec le code BCP 47 :

javascript
recognition.lang = 'fr-FR';  // Français (France)
recognition.lang = 'en-US';  // Anglais (USA)
recognition.lang = 'nl-BE';  // Néerlandais (Belgique)

Redémarrage automatique ​

La reconnaissance peut s'arrêter après un silence. Pour la relancer automatiquement :

javascript
recognition.onend = () => {
  if (shouldContinue) {
    setTimeout(() => {
      recognition.start();
    }, 300);
  }
};

Ce qui ne fonctionne pas ​

Activation sans interaction utilisateur ​

Les navigateurs modernes bloquent le démarrage du micro sans interaction utilisateur (clic, tap...).

Obligatoire

Toujours démarrer la reconnaissance dans un gestionnaire d'événement utilisateur (click, touchstart...).

javascript
// ❌ Ne fonctionne PAS
recognition.start(); // Bloqué par le navigateur

// ✅ Fonctionne
button.addEventListener('click', () => {
  recognition.start();
});

p5.speech (librairie) ​

La librairie p5.speech est un wrapper autour de l'API native mais :

  • Elle est parfois instable
  • Elle peut ne pas fonctionner sur certains navigateurs
  • Mieux vaut utiliser l'API native directement

Firefox ​

Firefox ne supporte pas la Web Speech API pour la reconnaissance vocale (uniquement la synthèse vocale).

Erreurs courantes ​

ErreurCauseSolution
not-allowedPermission micro refuséeAutoriser le micro dans les paramètres
networkPas de connexionChrome nécessite une connexion pour la reconnaissance
no-speechAucune parole détectéeNormal après un silence, relancer si besoin
abortedReconnaissance annuléeSouvent à cause d'un double start()

Exemple complet avec comparaison de mots ​

javascript
let motATrouver = "soleil";
let motTrouve = false;

recognition.onresult = (event) => {
  let transcript = '';
  for (let i = event.resultIndex; i < event.results.length; i++) {
    transcript += event.results[i][0].transcript;
  }
  
  // Normaliser (minuscules, trim)
  let heard = transcript.toLowerCase().trim();
  
  // Vérifier si le mot est dans la phrase
  if (!motTrouve && heard.includes(motATrouver.toLowerCase())) {
    console.log('🎉 Mot trouvé !');
    motTrouve = true;
    recognition.stop();
  }
};

Intégration avec WebSocket ​

On peut combiner la reconnaissance vocale avec WebSocket pour créer un jeu multijoueur :

javascript
// Recevoir le mot à trouver
socket.on('message', (data) => {
  if (data.mot) {
    motATrouver = data.mot;
  }
});

// Envoyer la victoire quand trouvé
recognition.onresult = (event) => {
  // ... (voir exemple ci-dessus)
  if (motTrouve) {
    socket.emit('message', { victoire: motATrouver });
  }
};

Ressources ​