La synthese vocale

1 Avril 2013 , Rédigé par crriam Publié dans #Synthese vocale

J'ai une piste, ou plutot deux pistes serieuses qui permetent de donner la parole au robot.

La 1ere, utiliser mespeak js :
[www.masswerk.at]
qui permet d'avoir une synthese vocal tout en javascript. Bon, ça marche avec firefox, mais la qualité est un peu...robotique :) les temps de chargement un peu long et ça bug avec google chrome pour ubuntu mais pas chrome pour windows

La 2eme, utiliser l'api de synthese vocale de google translate. La qualité est tres bonne,

Soucis aussi avec cette solution : être dépandant des changement de google et sa technologie.Ne fonctione pas ou mal sur firefoxe.

J'ai finalement fait la synthese vocal pour le rivscript. en utilisant mespeak.js
voila le lien pour la tester. (la base de cerveau est pratiquement vide, j'ai pas eu le temps de m'y mettre vraiment vu toutes les direction que prennent mes projet en ce moment ) Mais ça donne une idée

[tungstene.free.fr]

J'ai pris le dossier original, tout copier dans le repertoire rivescript/eg/

de façon a avoir les fichiers au même endroit (pour que ça fonctionne en local et pas seulement en web)

modifier un tout petit truc, du fichier index.html (le form n'avait pas d'attribut name) j'ai laisser trainer le reste du code en commentaire pour pouvoir m'en servir au cas ou. et je l'ai appler indexparle.html pour pas qu'il entre en conflit avec mon index.html qui est la page de cadre.

Je mets le tout dans une page html diviser en trois cadres (comme d'habitude mais avec un cadre suplémentaire en bas a gauche): un a gauche appler gauche, un a droite appler droit et un en bas a gauche appeler ...gauchebas :)

Le code html de index.html :

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<FRAMESET COLS="35%,65%" framespacing=0 frameborder=0 border=0>
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="webcam.html" NAME="gauche" >
<FRAME SRC="indexparle.html" NAME="gauchebas" >
</frameset>
<FRAME SRC="chat.html" NAME="droite">

</FRAMESET>

<NOFRAMES>
<BODY>
Cette page HTML nécessite un navigateur supportant les frames,
veuillez nous en excuser.
</BODY>
</NOFRAMES>

</html>

Le cadre de gauche sers uniquement d'interface visuel au robot, là, on pourra faire apparaitre le visuel du robot avec des gif annimé par exemple ou une belle petite video flash. Le bouton coucou, sert a mettre en évidence la possibilité d'interagir aussi sur le robot en clikant sur cette page.

le code de webcam.html :

<html>
<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title></title>
</head>
<body>
    <img alt="webcam" src="images/Image15.jpg"><br>

<script language="JavaScript">
function submitform()
{
if(parent.droite.document.form1.onsubmit())
{
parent.droite.document.form1.submit();
}
}
</script>

<SCRIPT language="Javascript">
function test() {

       parent.droite.document.form1.message.value="coucou";
       javascript:submitform();
}
</SCRIPT>

<input name="bouton" value="taper coucou" onclick="test()" type="button">

<INPUT type="image" WIDTH =70 HEIGHT =70 src="http://tungstene.free.fr/imagesrobot/dollz094.gif" value="taper coucou" onclick="test()" name=Image>

</body>
</html>

Le cadre gauche bas, lui sert a la synthese vocale, c'est le programme mespeak.js qui s'y affiche avec la page

indexparle.html

le code :

<html>
<title>meSpeak.js: Text-to-Speech on the Web</title>
<head>
<script>
    // This demo is licensed under the GNU GPL.
</script>
<script type="text/javascript" src="mespeak.js"></script>
<script type="text/javascript">
    meSpeak.loadConfig("mespeak_config.json");
    meSpeak.loadVoice("voices/fr.json");

    function loadVoice(id) {
      var fname="voices/"+id+".json";
      meSpeak.loadVoice(fname, voiceLoaded);
    }

    function voiceLoaded(success, message) {
      if (success) {
        alert("Voice loaded: "+message+".");
      }
      else {
        alert("Failed to load a voice: "+message);
      }
    }
</script>
</head>
<body>

<h2>Text-To-Speech on the Web</h2>

<form name="form1" onsubmit="meSpeak.speak(text.value, { amplitude: amplitude.value, wordgap: workdgap.value, pitch: pitch.value, speed: speed.value }); return false">
    Text: <input type="text" name="text" size=50 value="Never gonna give, you, up.">
    Amplitude: <input type="text" name="amplitude" size=5 value="150">
    Pitch: <input type="text" name="pitch" size=5 value="50">
    Speed: <input type="text" name="speed" size=5 value="175">
    Word gap: <input type="text" name="workdgap" size=5 value="0">
    <input type="submit" value="Go!">
</form>

</body>
</html>

( J'ai enlever ici pour la lisibilité le code inutile du chois des langues mais ça fonctionne tres bien )et configurer pour la langue française.

Le cadre de droite, est le fichier chat.html que j'ai une nouvelle fois modifier avec un tout petit code javascript pour faire apparaitre le texte répondu dans l'input de la page de gauche bas ! Il suffit de faire un autosbumit et hop, le robot parles :))

Attention, l'ajouter dans le fichier chat.html juste avant

// debut code ajax pour lancer le fichier editeurhistoric.php afin de creer et remplir un fichier chat log

sinon en locale ça va buger puisque ajax impossible !

code a ajouter :

// debut parle
setTimeout(function(){window.parent.gauchebas.document.form1.text.value=reply;if(parent.gauchebas.document.form1.onsubmit())
{parent.gauchebas.document.form1.submit();}},20);

// fin parle

Seule bémole, il ne capte pas les ç et les accents bien sur :( et il est un peut lent a charger au départ.vous pouvez tester en plus la reconnaissance vocal avec chrome ( a teste sur le même lien, cliker sur le petit micro dans la case de saisie du texte)

Je pense qu'on peu facilement adapter ça a program E.

J'avais penser a faire la même chose avec le tts de google translate, il protége la page en l'empéchant d'être ouverte dans une frame., mais on peut tout de même y accéder en url direct comme ça :
translate.google.com/translate_tts?tl=fr&q=bonjour

Pour changer la langue, suffit de changer le fr en eg par exemple.

Ou en php allez voir ici pour un script complet en php :
[stuffthatspins.com]

Pour ma part, j'ai juste remplacer le code pour la synthese vocal que je viens de vous donner ci dessus par celui-ci :

// debut parle

setTimeout(function(){window.parent.gauchebas.location='http://translate.google.com/translate_tts?tl=fr&q='+reply},200);

// fin parle

La voix est en français, mais elle parle a mon gout trop lentement, (peut etre qu'on peut regler ça avec des parametres) et nécessite une connection internet obligatoire.

attention ne fonctione qu'en ligne et pas sur firefox !

Conclusion :

tout fonctionne bien a part les accents, mais ça ne devrait pas posé de soucis puisque l'on veille a justement ne pas en mettre.
Ce point la souléve donc la question : doit on intégré les son aux réponses ?

J'explique :
pour garçon => garson et non pas garcon
car si la cédille en moins ne géne pas à la lecture, le son c au lieu de s :(
a réfléchir.

La Reconnaissance vocal

Votre robot peut aussi avoir la reconnaissance vocal html 5 en utilisant le navigateur de google chrome.

Pour ça, il suffit de changer par exemple votre

<input type="text" size="40" name="message" id="message" autocomplete="on" disabled placeholder="Please wait... loading..." >
en

<input type="text" size="40" name="message" id="message" autocomplete="on" disabled placeholder="Please wait... loading..." x-webkit-speech/>

ça affichera un petit micro a droite dans le champ de text. En cliquant dessus, vous n'aurez plus qu'a parler, et votre robot vous répondra.

Evidemment la qualité de la reconnaissance vocal dépendra de votre micro, de l'environement sonor et de votre accent ;)

~~Pour l'instant, ça ne fonctionne à ma connaissance qu'avec le navigateur chrome.~~

Depuis fevrier 2014, google a suprrimer cette fonctionnalité, vous pouvez encore utiliser l'api javascript de google, bien plus délicate a utiliser,

http://www.grafikart.fr/tutoriels/javascript/web-speech-api-424

ou essayer plus simplement avec https://www.talater.com/annyang/

elle utilise aussi l'api chrome, mais apparament plus simplement.

je n'ai tester aucune des deux solutions pour le moment.

Partager cet article

Repost0

Rivscript les interaction avec le robot

Rivescript piloter une interface graphique

Retour à l'accueil

Commenter cet article