Fiche Javascript : synthèse et reconnaissance vocale

Objet de la fiche :

Permettre d‘intégrer une synthèse vocale de qualité dans votre site Web. Activation vocale sur un lien ou au survol d‘une image, faire des actions en fonction de commandes vocales etc.

État de la fiche

Plan de la fiche :

• | Avant propos |
• | Présentation générale Web Speech API |
• | Texte vers vocal (Text To Speech) |
• | Reconnaissance vocale |
• | Application |

Avant propos :

La reconnaissance vocale est un concept utilisé pour gérer les interactions entre une personne (ou des sons spécifiques) et une application (machine) afin d'établir un dialogue dit "homme-machine". Pour être complet il convient de lui associer le concept de synthèse vocale (la machine parle à l'homme).
Ces deux concepts sont connus en tant que SR (Speech Recognition ou reconnaissance vocale) et TTS (Text-To-Speech ou synthèse vocale).

Présentation générale Web Speech API

Cette API permet d'incorporer des données de voix dans des applications Web. L'API est composée de deux parties : SpeechSynthesis (Synthèse vocale) et SpeechRecognition (Reconnaissance Vocale Asynchrone.)

• SpeechRecognition est accessible via l'interface SpeechRecognition, qui fournit la capacité de reconnaître des informations provenant d'une source audio et répondre de la manière la plus appropriée. Généralement on utilise le constructeur de l'interface pour créer l'objet SpeechRecognition, qui possède un certain nombre d'événements disponibles pour détecter un signal audio.
  L'interface SpeechGrammar représente un conteneur pour un ensemble particulier de grammaire que votre application aura à reconnaître. La grammaire est définie par JSpeech Format de Grammaire (JSGF).
• La synthèse vocale est accessible via l'interface SpeechSynthesis, qui est un composant de la synthèse vocale permettant aux programmes de lire à haute voix leur contenu texte.
  Les types de voix différents sont disponibles via l'interface SpeechSynthesisVoice, le traitement des messages est disponible via l'interface SpeechSynthesisUtterance.
  L'ensemble des paramètres est ensuite passé à la méthode SpeechSynthesis.speak () pour déclencher l'action de transformation du texte en voix.

Texte vers vocal (Text To Speech)

L'API de Synthèse vocale est étonnamment facile à mettre en œuvre. En fait, il prend basiquement seulement deux lignes de code pour permettre à votre application Web de parler aux utilisateurs.

Var enonciation = nouveau SpeechSynthesisUtterance (' Bonjour tout le monde ');
Window.speechSynthesis.speak (enonciation);

Dans cet exemple on commence par créer une instance de SpeechSynthesisUtterance avec comme paramètre le texte que vous voulez synthétiser. dans la deuxième ligne on passe l'objet SpeechSynthesisUtterance à la méthode speak de l'interface speechSynthesis.

SpeechSynthesis

Généralités

Cette interface de l'API web Speech contrôle la synthèse vocale texte vers paroles (Text To Speech)

L'objet SpeechSynthesis n'a pas besoin d'être instancié. Il fait partie intégrante de l'objet Window et peut ainsi être utilisé directement.

Comment tester si votre navigateur supporte cette API

Attributs - Méthodes - Evènements

L'interface speechSynthesis inclut un certain nombre d'attributs qui peuvent être utiles pour vérifier l'état de la synthèse vocale à l'instant t dans le navigateur.

Note¹ : certains attributs ne sont pas toujours disponibles suivant les voix.

Note² : les mêmes voix ne sont pas toujours disponibles suivant les navigateurs. Tester votre application sur le plus grand nombre de navigateurs possibles et prévoyez une voix de repli au cas ou !.

L'interface SpeechSynthesisUtterance

Généralités

Cette interface de l'API web Speech représente une requête de discours. Il contient le contenu à lire et des informations sur la façon de le lire (par exemple la langue ou le volume...)

Attributs - Méthodes - Evènements

Note¹ : ces attributs ne sont pas supportés par toutes les voix.

Attention :

Il y a un bogue connu dans le Chrome qui fait que la synthèse vocale arrête de fonctionner si vous utilisez le texte plus grand que ~ 300 caractères. Suite à cela il faut arrêter et relancer Chrome.

Une solution simple est de faire un resume() permanent de l'objet window.speechSynthesis

Merci à un inconnu du web pour avoir trouvé cela.

Exemple

Structure de la démonstration

La structure générale de génération d'un texte parlé est relativement simple. Le contenu de la démonstration ci-dessous est un peu alourdie par les différents réglages possibles, ainsi que par la gestion et l'affichage des divers messages pour guider au mieux l'utilisateur. On ne détaille ici que les bases de la synthèse.

• Instanciation des objets
  0. function initSynthese(){  
  1.     try{  
  2.         synth = window.speechSynthesis;  
  3.         utt = new SpeechSynthesisUtterance();  
  4.     }  
  5.     catch(e) {.......}  
  6. }  

  function initSynthese(){ try{ synth = window.speechSynthesis; utt = new SpeechSynthesisUtterance(); } catch(e) {.......} }
• Initialisation de l'utterrance : réglage de la voix, du volume, intonation et rytme,
  0. function setUtterance(_lang,_voiceTheme,_volume,_pitch,_rate){  
  1.     try{  
  2.         utt.volume = _volume; // 0 à 1  
  3.         utt.pitch = _pitch; //0 à 2  
  4.         utt.rate = _rate; // 0.1 à 10  
  5.       
  6.         synth.getVoices().forEach(function(voice) {  
  7.             if(voice.lang === _lang && voice.name === _voiceTheme) {  
  8.                 utt.voice = voice;  
  9.             }  
  10.         });  
  11.     }  
  12.     catch(e){...);}  
  13. }  

  function setUtterance(_lang,_voiceTheme,_volume,_pitch,_rate){ try{ utt.volume = _volume; // 0 à 1 utt.pitch = _pitch; //0 à 2 utt.rate = _rate; // 0.1 à 10 synth.getVoices().forEach(function(voice) { if(voice.lang === _lang && voice.name === _voiceTheme) { utt.voice = voice; } }); } catch(e){...);} }
• Initialisation des évènements de l'utterance
  0. function setUtteranceEvents(){  
  1.     try{  
  2.         // Initialisation des évènements  
  3.         utt.onend = function(event) { ... }  
  4.         utt.onerror = function(event) { ... }  
  5.         utt.onstart = function(event) { ... }  
  6.         utt.onpause = function(event) { ... }   
  7.         utt.onresume = function(event){ ... }  
  8.     }  
  9.     catch(e){...}  
  10. }  

  function setUtteranceEvents(){ try{ // Initialisation des évènements utt.onend = function(event) { ... } utt.onerror = function(event) { ... } utt.onstart = function(event) { ... } utt.onpause = function(event) { ... } utt.onresume = function(event){ ... } } catch(e){...} }
• Démarrage de la synthèse
  0. synth.speak(utt);  

  synth.speak(utt);

Démonstration

Remarque :
Deux timeout ont été introduits pour ne démarrer les actions qu'aprés un delay aprés le chargement complet de la page. Il s'agit d'un petit bug pas encore corrigé sur chrome (sans cela on n'arrive pas à faire fonctionner correctement la synthèse vocale.

Reconnaissance vocale

webkitSpeechRecognition

Comment tester si votre navigateur supporte cette API

Attributs - Méthodes - Evènements

Grammaire (SpeechGrammar objects)

Tout logiciel de reconnaissance vocale doit être capable de comparer une entrée sonore à une grammaire afin de produire une transcription en texte littéral de l'entrée détectée.

Une grammaire de reconnaissance vocal est un ensemble de règles ou de contraintes qui définissent ce qu'un moteur de reconnaissance vocale peut identifier en tant qu'entrée explicite.

Ces objets pour leur définition utilisent le format JSGF (JSpeech Grammar Format). D'autres formats peuvent aussi être utilisés.

Objet SpeechGrammar

Cet object représente le container d'une grammaire. Il possède des attributs permettant d'initialiser ou de retourner des informations sur la grammaire de l'objet SpeechGrammar.>

• src : URI pour la grammaire..
• weight¹ (optionnel) : Cet attribut contrôle le poids que le service de reconnaissance vocale devrait utiliser avec cette grammaire. Par défaut, une grammaire a un poids de 1. Des plus grandes valeurs de poids pondèrent positivement la grammaire tandis que des valeurs de poids plus petites font la grammaire moins fortement pondérée.

Note¹ : La propriété Weight retourne une valeur à virgule flottante indiquant le poids relatifs qu'une instance du moteur de reconnaissance doit assigner à la grammaire lors de la saisie vocale.

La reconnaissance vocal est un système pondérée.Elle évalue tous les chemins d'accès possibles de reconnaissance sur une combinaison de poids de la grammaire, les poids définis pour les solutions dans la grammaire, ainsi que les probabilités définies par les modèles de parole. Le moteur de reconnaissance vocale utilise la combinaison des poids et probabilités pour classer les reconnaissances potentielles. Les grammaires avec des poids plus élevés fournissent plus sur le classement des méthodes de reconnaissance que les grammaires avec les poids inférieurs.

SpeechGrammarList

Cet object représente l'ensemble des objets SpeechGrammar contenant eux même des mots ou des construction de mots qui devront être reconnus par la reconnaissance vocale .

Le format JSGF

Le fichier JSGF définit les règles de la grammaire à utiliser et permet aussi de définir une grammaire plus ou moins restrictive qu'une liste de mots peut faire. La règle complète est définie comme un standard du W3C.

Eléments de base de la structure

• La première ligne du fichier est l'identifiant du fichier JSGF obligatoire pour tout fichier de ce type.
• La ligne suivante définie le nom de la grammaire.
• Chaque ligne doit se terminer par un point virgule ;
• On peut insérer des commentaires aprés // sur une ligne, ou entre /* et */ pour une ou plusieurs lignes.
• Les règles de grammaire sont définies entre les signes < >. Les règles entre crochets [ et ] indiquent que celles ci sont optionnelles.

Voici quelques méthodes clés et exemples.

Exemple 1

Supposons que vous voulez reconnaître un ordre de trois chiffres. Tandis que l'approche de liste de corde(série) pourrait être utilisée pour spécifier une grammaire appropriée, la grammaire consisterait en mille commandes. Inutile de dire, ceci est difficile d'écrire et maintenir(entretenir). Le fichier(dossier) de JSGF qui reconnaît un ordre de trois chiffres contient les lignes suivantes :

Exemple 2

Cet exemple montre comment utiliser des étiquettes de grammaire (tag). Les étiquettes de grammaire sont utilisées pour localiser des mots reconnus ou des expressions.

Cette grammaire pourra reconnaîtra des phrases comme par exemple "please open the file".

• La première règle est définie comme publique : c'est cette règle qui défini la visibilité extérieure de la grammaire. Les règle publique sont les phrases ou mots que la grammaire peut utiliser pour la reconnaissance.
• Les informations entre { } identifient

Exemple

Structure de la démonstration

La structure générale de reconnaissance vocale est encore plus simple à mettre en oeuvre que la transformation texte / Parole vue précédemment. Le contenu de la démonstration ci-dessous est un peu alourdie par les différents réglages possibles, ainsi que par la gestion et l'affichage des divers messages pour guider au mieux l'utilisateur. On ne détaille ici que les bases de la reconnaissance.

• Test de compatibilité :
  0. if (!('webkitSpeechRecognition' in window)) {// non compatible}  

  if (!('webkitSpeechRecognition' in window)) {// non compatible}
• Déclaration de la variable globale : final_transcript qui représente la chaine de caractères transcrite.
  0. var final_transcript = "";  

  var final_transcript = "";
• Instanciation de l'objet et déclaration de variables globales
  0. var recognition = new webkitSpeechRecognition();  

  var recognition = new webkitSpeechRecognition();
• Initialisation de l'objet
  0. recognition.continuous = true;  
  1. recognition.interimResults = true;  
  2. recognition.lang = "fr-FR";               

  recognition.continuous = true; recognition.interimResults = true; recognition.lang = "fr-FR";
• Initialisation des évènements
  0. recognition.onstart = function() { ... }  
  1. recognition.onresult = function(event) { ... }  
  2. recognition.onerror = function(event) { ... }  
  3. recognition.onend = function() { ... }  

  recognition.onstart = function() { ... } recognition.onresult = function(event) { ... } recognition.onerror = function(event) { ... } recognition.onend = function() { ... }
• Gestion de l'évènement onresult = function(event) { ... }
  0. recognition.onresult = function(event) {  
  1.     var interim_transcript = '';  
  2.   
  3.     for (var i = event.resultIndex; i < event.results.length; ++i) {  
  4.       if (event.results[i].isFinal) {  
  5.         final_transcript += event.results[i][0].transcript;  
  6.       } else {  
  7.         interim_transcript += event.results[i][0].transcript;  
  8.       }  
  9.     }  
  10.     final_transcript = capitalize(final_transcript);  
  11.     final_span.innerHTML = linebreak(final_transcript);  
  12.     interim_span.innerHTML = linebreak(interim_transcript);  
  13.   };  
  14. }  

  recognition.onresult = function(event) { var interim_transcript = ''; for (var i = event.resultIndex; i < event.results.length; ++i) { if (event.results[i].isFinal) { final_transcript += event.results[i][0].transcript; } else { interim_transcript += event.results[i][0].transcript; } } final_transcript = capitalize(final_transcript); final_span.innerHTML = linebreak(final_transcript); interim_span.innerHTML = linebreak(interim_transcript); }; }
• Adaptation HTML
  0. <div>  
  1.     <span id="final_span"></span>    
  2.     <span id="interim_span"></span>  
  3. </div>  

  <div> <span id="final_span"></span>  <span id="interim_span"></span> </div>
• Démarrage / Arrêt de la reconnaissance
  0. recognition.start();  
  1. // ou  
  2. recognition.stop();  

  recognition.start(); // ou recognition.stop();

Remarques

• Le handler de onresult concataine tous les résultats reçus au fur et à mesure, dans deux chaines de caractères :final_transcript et interim_transcript. Les chaines résultantes peuvent inclure "\n", comme lorsque l'utilisateur dit "nouveau paragraphe", d'ou l'utilisation de la fonction linebreak pour convertir ceux-ci en balises HTML < br > ou < p >.
  Ces chaines sont transférées à l'élément < span > (via innerHTML) : final_span avec un style de texte noir (informations définitives) et interim_span avec un style de texte gris(informations temporaires).
  
  Dans notre exemple chaque élément est ajouté au fur et à mesure que l'on parle, on peut faire en sorte que seul un mot soit pris en compte (donc si plusieurs mots sont dits, chaque mot remplacera le premier et ainsi de suite), simplement en modifiant dans l'évènement event :
  
  • final_transcript += event.results[i][0].transcript; => final_transcript = event.results[i][0].transcript;.
  • interim_transcript += event.results[i][0].transcript; => interim_transcript = event.results[i][0].transcript;.
• interim_transcript est défini comme variable locale. Elle est donc renouvelée chaque fois que l'évènement est activé. Ceci est nécessaire car il est possible que tous les résultats temporaires puissent être modifiés depuis le précédent évènement.
  On aurait pu faire la même chose avec la variable final_transcript (c'est à dire la définir en local et non en global) simplement en modifiant le départ de la boucle : for (var i = 0;...) au lieu de for (var i = event.resultIndex;...). Dans le cas de trés longs textes ou lorsque on veut optimiser à tout prix, il est préférable d'utilise event.resultIndex pour initialiser la boucle for.

Démonstration

Remarque sur l'ajout d'une grammaire

Les étapes suivantes ont été implémentées

• Création d'une nouvelle instance SpeechRecognition en utilisant le constructeur SpeechRecognition()
• Création d'une nouvelle SpeechGrammarList
• Ajouter à SpeechGrammarList une grammaire sous forme de chaîne en utilisant la méthode SpeechGrammarList.addFromString, ainsi qu'un poids, optionnel, qui définit l’importance de cette grammaire par rapport aux autres grammaires de la liste. Ce facteur peut aller de 0 à 1.
• Initaliser cette nouvelle grammaire comme étant celle qui sera reconnue par l'instance SpeechRecognition qui pourra utiliser les propriétés deSpeechRecognition.grammars.

Note : le navigateur Chrome ne semble pas traiter des grammaires spécifiques; au lieu de cela il rend juste tous les résultats et vous pouvez les traiter comme vous voulez.

Sécurité

Les pages hébergées avec accessibilité en http doivent demander la permission à chaque requête d'une capture audio. Ceci pour éviter une brèche de sécurité dans laquelle une application pourrait faire de l'enregistrement audio et écouter en permanance toutes les données échangées, une fois que l'utilisateur ai autorisé la fonctionnalité audio.

Application