[Résolu] Traduire le texte dans une page web

Bonsoir bonsoir.
je recherche un script pour traduire le contenu de mon site web et je suis tomber sur l'API de google mais.... ça ne marche pas et j'aimerais savoir si par hasard vous avez une orientation à me donner ou à défaut m'aider avec mon script d'exemple que j'ai piquer sur CommetCaMarche (au cas où j'aurais fait une erreur) que voici

<select id="languedorigine">
<option value="fr">Francais</option> <!--Vous pouvez rajouter d'autres langues !-->
<option value="en">English</option>
<option value="de">German</option>
<option value="es">Español</option>
</select>

<select id="languetraduite">
<option value="fr">Francais</option>
<option value="en">English</option>
<option value="de">German</option>
<option value="es">Español</option>
</select>

<div id="informations"></div>
<textarea id="texteatraduire"></textarea>
<div id="textetraduit"></div>

<a href="javascript:Traduction()">Traduire</a> <a href="javascript:Langue()">Touver la langue</a>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");

function Langue() //Fonction pour trouver la langue
	{
	var texteatraduire = document.getElementById('texteatraduire').value;
	var languetraduite = document.getElementById('languetraduite').value;
	var languedorigine = document.getElementById('languedorigine').value;
	
	var text = texteatraduire;
	google.language.detect(text, function(result) //API Google
	{
		if (!result.error) 
			{
			var language = 'unknown';
			for (l in google.language.Languages) 
				{
				if (google.language.Languages[l] == result.language) 
					{
					language = l;
					break;
					}
				}
				document.getElementById('informations').innerHTML = "This text is in "+l; //Ecriture de la langue
			}
		});
	}
	
function Traduction() 
	{
	var texteatraduire = document.getElementById('texteatraduire').value;
	var languetraduite = document.getElementById('languetraduite').value;
	var languedorigine = document.getElementById('languedorigine').value;

	if (languedorigine == languetraduite) //On vérifie si les deux langues ne sont pas identiques
		{
		document.getElementById('informations').innerHTML = "La langue du texte et celle dans laquelle il doit être traduit sont identiques.";
		}
	else
		{
		google.language.translate(texteatraduire, languedorigine, languetraduite, 
		function(result) 
			{
			if (!result.error) 
				{
				var container = document.getElementById("textetraduit");
				container.innerHTML = result.translation;
				document.getElementById('informations').innerHTML = "Le texte à été traduit.";
				}
			});
		}
	}

</script>

Merci d'avance pour vos différentes réactions

Bonjour Dimtrovich,
j'ai testé ton code en ajoutant juste un "console.log(result);" dans fonction(result) {...

et voilà ce qui te dis le service de traduction de google ou plutôt ex-service de traduction de google si j'ai bien compris :
error: code:403 message:"Please use Translate v2. See http://code.google.com/apis/language/translate/overview.html"

Je vais tester la nouvelle version cela m'intéresse...
Bonne journée

Apparemment la nouvelle version est payante, mais il est possible de l'essayer gratuitement en s'inscrivant pour un essai gratuit de la "Google Cloud Platform".
Il faut quand même donner un numéro de carte bleu...
Sinon la syntaxe est simple en synchrone et un peu moins en asynchrone :

dans la doc des developper google il y a un exemple de la requête envoyée à leur serveur:

GET https://translation.googleapis.com/language/translate/v2?q=mon+premier+est+un+exemple&q=mon+second+n'est+pas+le+premier&target=en&cid=resultat&format=text&source=fr&key={YOUR_API_KEY}

qui renvoie une réponse en JSON de la forme suivante :

{
"data": {
"translations": [
{
"translatedText": "my first is an example"
},
{
"translatedText": "my second is not the first"
}
]
}
}

J'ai repris ta fonction traduction et adaptée à la nouvelle version de l'api google.
Il y a possiblement pour ne pas dire surement des erreurs dans mon code puisque je ne l'ai pas testé jusqu'au bout...(notamment sur l'encodage du texte à traduire).

Il faudra aussi que tu récupères la clé d'accès à l'API google sur https://developers.google.com/apis-explorer/

Sur W3C ou MDN tu trouveras une bonne documentation sur la class xmlHttpRequest
et sur JSON.

Bonne journée

    /*
     * Avec une requête Asynchrone
     */
    function Traduction() 
    {
	var texteatraduire = document.getElementById('texteatraduire').value;
	var languetraduite = document.getElementById('languetraduite').value;
	var languedorigine = document.getElementById('languedorigine').value;

	if (languedorigine == languetraduite) //On vérifie si les deux langues ne sont pas identiques
        {
            document.getElementById('informations').innerHTML = "La langue du texte et celle dans laquelle il doit être traduit sont identiques.";
        }
	else 
        {
            var YOUR_API_KEY="clé à rechercher sur  https://developers.google.com/apis-explorer/";
 
            var urlrequest = "https://translation.googleapis.com/language/translate/v2?"+
                            "q="+encodeURI(texteatraduire.replace(/ /g,"+"))+
                            "&target="+languetraduite+
                            "&format=text&source="+languedorigine+"&key="+YOUR_API_KEY;
            var req = new XMLHttpRequest();
            
            req.open('GET', urlrequest, true); //Asynchrone
            req.send(null);
            req.onreadystatechange = function(event) {
                if (this.readyState === XMLHttpRequest.DONE) {
                        if (this.status == 200 ) {
                            var reponseJSON=JSON.parse(this.responseText);
                            var container = document.getElementById("textetraduit");
                            //La réponse est sous la forme d'un tableau
                            //car on peut demander la traduction de plusieurs textes dans la requête
                            //en ajoutant autant de &q=texteàtraduire que nécessaire
                            container.innerHTML = reponseJSON.data.translations[0].translatedText;
                            document.getElementById('informations').innerHTML = "Le texte à été traduit.";
                        } else {
                            var container = document.getElementById("textetraduit");
                            container.innerHTML = "Il y a une erreur, consulter la console!";
                            console.log(this);
                        }
                    }
            };
            

        }
    }

/*
 * Avec une requête synchrone
 */
/*
function Traduction() 
    {
	var texteatraduire = document.getElementById('texteatraduire').value;
	var languetraduite = document.getElementById('languetraduite').value;
	var languedorigine = document.getElementById('languedorigine').value;

	if (languedorigine == languetraduite) //On vérifie si les deux langues ne sont pas identiques
        {
            document.getElementById('informations').innerHTML = "La langue du texte et celle dans laquelle il doit être traduit sont identiques.";
        }
	else 
        {
            var YOUR_API_KEY="clé à rechercher sur  https://developers.google.com/apis-explorer/";
 
            var urlrequest = "https://translation.googleapis.com/language/translate/v2?"+
                            "q="+encodeURI(texteatraduire.replace(/ /g,"+"))+
                            "&target="+languetraduite+
                            "&format=text&source="+languedorigine+"&key="+YOUR_API_KEY;
            var req = new XMLHttpRequest();
            
            req.open('GET', urlrequest, false); //Synchrone
            req.send(null);
            console.log(req.responseText);
            if (req.status == 200 ) {
                var reponseJSON=JSON.parse(req.responseText);
                var container = document.getElementById("textetraduit");
                //La réponse est sous la forme d'un tableau
                //car on peut demander la traduction de plusieurs textes dans la requête
                //en ajoutant autant de &q=texteàtraduire que nécessaire
                container.innerHTML = reponseJSON.data.translations[0].translatedText;
                document.getElementById('informations').innerHTML = "Le texte à été traduit.";
            } else {
                var container = document.getElementById("textetraduit");
                container.innerHTML = "Il y a une erreur, consulter la console!";
                console.log(req);
            }

        }
    }*/

Modifié par GJboba (16 Sep 2017 - 02:07)

Bonsoir et desole pour le retard.
Merci GJboba. je vais me pencher davantage sur la nouvelle api de google.

N;existerait-il pas par hasard une solution gratuite qui offre plus/moins les mêmes fonctionnalités ?
Modifié par Dimtrovich (29 Sep 2017 - 18:24)