Maison > Article > interface Web > Construire un outil de traduction en temps réel basé sur JavaScript
Construire un outil de traduction en temps réel basé sur JavaScript
- WBOYoriginal
- 2023-08-09 19:22:451501parcourir
Créer un outil de traduction en temps réel basé sur JavaScript
Introduction
Avec la demande croissante de mondialisation et l'apparition fréquente d'échanges et d'échanges transfrontaliers, les outils de traduction en temps réel sont devenus une application très importante. Nous pouvons exploiter JavaScript et certaines API existantes pour créer un outil de traduction en temps réel simple mais utile. Cet article présentera comment implémenter cette fonction basée sur JavaScript, avec des exemples de code.
Étapes de mise en œuvre
Étape 1 : Créer une structure HTML
Tout d'abord, nous devons créer une structure HTML simple pour héberger notre outil de traduction en temps réel. Voici un exemple de structure HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时翻译工具</title>
</head>
<body>
<h1>实时翻译工具</h1>
<textarea id="source-textarea" placeholder="请输入要翻译的文本"></textarea>
<textarea id="translated-textarea" readonly></textarea>
</body>
</html>Étape 2 : Ajouter des styles
Pour embellir notre outil de traduction en temps réel, nous pouvons ajouter quelques styles CSS de base. Voici un exemple de style :
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
h1 {
color: #333;
}
textarea {
width: 400px;
height: 200px;
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}Étape 3 : Implémenter la fonction de traduction
Utilisez JavaScript et l'API Google Translate pour implémenter la fonction de traduction en temps réel. Tout d’abord, ajoutez le code suivant en bas de la page :
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("language", "1");
google.setOnLoadCallback(initialize);
function initialize() {
var sourceTextarea = document.getElementById("source-textarea");
var translatedTextarea = document.getElementById("translated-textarea");
sourceTextarea.addEventListener("input", function() {
var translatedText = translate(sourceTextarea.value);
translatedTextarea.value = translatedText;
});
function translate(text) {
var translation = "";
var langDetection = google.language.detect(text, function(result) {
var sourceLang = result.language;
var targetLang = "en"; // 例如，将源语言设置为自动检测，将目标语言设置为英语
google.language.translate(text, sourceLang, targetLang, function(result) {
if (result.translation) {
translation = result.translation;
}
});
});
return translation;
}
}
</script>Dans le code ci-dessus, nous avons utilisé l’API de Google Translate pour la traduction. Nous avons d'abord chargé la bibliothèque JavaScript de Google, puis initialisé l'outil de traduction et ajouté un écouteur d'événement d'entrée à la zone de texte source. Chaque fois que l'utilisateur saisit du contenu, cet événement sera déclenché et la fonction de traduction sera appelée pour obtenir les résultats de la traduction.
Conclusion
Avec les étapes simples ci-dessus, nous pouvons créer un outil de traduction en temps réel basé sur JavaScript. Les utilisateurs peuvent saisir du texte à traduire et il sera automatiquement traduit en anglais ou dans d'autres langues cibles via l'API Google Translate. Cet outil de traduction en temps réel peut être facilement appliqué à la communication et à la communication multilingues.
Veuillez noter que l'API Google Translate est utilisée dans les exemples de code et qu'un abonnement et une authentification correspondants peuvent être requis lors d'une utilisation réelle. Dans le même temps, afin d'améliorer l'expérience utilisateur, davantage de fonctionnalités et d'optimisations peuvent être ajoutées. Cependant, les exemples de code ci-dessus peuvent vous servir de base pour commencer à créer un outil de traduction en temps réel.
Références
- Documentation de l'API Google Translate - https://cloud.google.com/translate/docs/reference/
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!