Construire un outil de traduction en temps réel basé sur JavaScript-js tutoriel-php.cn

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

WBOY

Libérer： 2023-08-09 19:22:45

original

1582 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