Maison > interface Web > js tutoriel > Construire un outil de traduction en temps réel basé sur JavaScript

Construire un outil de traduction en temps réel basé sur JavaScript

WBOY
Libérer: 2023-08-09 19:22:45
original
1609 Les gens l'ont consulté

Construire un outil de traduction en temps réel basé sur JavaScript

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>
Copier après la connexion

É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;
}
Copier après la connexion

É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>
Copier après la connexion

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

  1. 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal