JavaScript ベースのリアルタイム翻訳ツールの構築-jsチュートリアル-php.cn

JavaScript ベースのリアルタイム翻訳ツールの構築

WBOY

リリース： 2023-08-09 19:22:45

オリジナル

1582 人が閲覧しました

JavaScript ベースのリアルタイム翻訳ツールの構築

はじめに

グローバル化の需要が高まり、国境を越えた交流や交流が頻繁に起こる中、、リアルタイム翻訳ツールは非常に重要なアプリケーションとなっています。 JavaScript といくつかの既存の API を活用して、シンプルだが便利なリアルタイム翻訳ツールを構築できます。この記事では、JavaScript をベースにこの機能を実装する方法をコード例とともに紹介します。

実装手順

ステップ 1: HTML 構造の作成

まず、リアルタイム翻訳ツールを収容する単純な HTML 構造を作成する必要があります。サンプルの 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>

ログイン後にコピー

ステップ 2: スタイルの追加

リアルタイム翻訳ツールを美しくするために、いくつかの基本的な CSS スタイルを追加できます。以下はスタイルの例です。

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;
}

ログイン後にコピー

ステップ 3: 翻訳機能の実装

JavaScript と Google Translate API を使用して、リアルタイム翻訳機能を実装します。まず、ページの下部に次のコードを追加します。

<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>

ログイン後にコピー

上記のコードでは、翻訳に Google 翻訳の API を使用します。まず Google の JavaScript ライブラリをロードし、次に翻訳ツールを初期化し、入力イベントリスナーをソーステキストボックスに追加しました。ユーザーがコンテンツを入力するたびに、このイベントがトリガーされ、翻訳関数が呼び出されて翻訳結果が取得されます。

結論

上記の簡単な手順で、JavaScript に基づいたリアルタイム翻訳ツールを構築できます。ユーザーは翻訳するテキストを入力すると、Google Translate API を介して英語またはその他のターゲット言語に自動的に翻訳されます。このリアルタイム翻訳ツールは、言語を越えたコミュニケーションやコミュニケーションに簡単に適用できます。

コード例では Google Translate API が使用されており、実際の使用では対応するサブスクリプションと認証が必要になる場合があることに注意してください。同時に、ユーザーエクスペリエンスを向上させるために、より多くの機能と最適化を追加できます。ただし、上記のコード例は、リアルタイム翻訳ツールの構築を開始するための基礎として役立ちます。

リファレンス