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

实时翻译工具

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 09, 2023 pm 07:22 PM

javascript 翻訳するリアルタイム

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

はじめに

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

実装手順

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

まず、リアルタイム翻訳ツールを収容する単純な HTML 構造を作成する必要があります。サンプルの HTML 構造は次のとおりです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实时翻译工具</title>
</head>
<body>
    <h1 id="实时翻译工具">实时翻译工具</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 が使用されており、実際の使用では対応するサブスクリプションと認証が必要になる場合があることに注意してください。同時に、ユーザーエクスペリエンスを向上させるために、より多くの機能と最適化を追加できます。ただし、上記のコード例は、リアルタイム翻訳ツールの構築を開始するための基礎として役立ちます。

リファレンス

Google 翻訳 API ドキュメント - https://cloud.google.com/translate/docs/reference/

以上がJavaScript ベースのリアルタイム翻訳ツールの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7486

CakePHP チュートリアル

1377

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Edge ブラウザに付属の翻訳 Web ページが見つからない場合はどうすればよいですか? Mar 14, 2024 pm 08:50 PM

エッジブラウザには翻訳機能が搭載されており、いつでもどこでも翻訳できるため、ユーザーは非常に便利ですが、多くのユーザーは、組み込みの翻訳 Web ページが見つからないという意見を述べています。私が持ってきた翻訳ページがありませんか?このサイトでは、Edge ブラウザーに付属の翻訳された Web ページが見つからない場合に復元する方法を紹介します。 Edge ブラウザーに付属の翻訳 Web ページが表示されない場合の復元方法 1. 翻訳機能が有効になっているかどうかを確認します。Edge ブラウザーで、右上隅にある 3 つの点のアイコンをクリックし、[設定] オプションを選択します。設定ページの左側で、言語オプションを選択します。必ず「翻訳(&R)」してください

字幕なしで映画を見ても心配しないでください。 Xiaomi、日本語と韓国語の翻訳のためのリアルタイム字幕Xiaoai Translationの開始を発表 Jul 22, 2024 pm 02:11 PM

7月22日のニュースによると、今日、Xiaomi ThePaper OSの公式Weiboは、Xiaoai翻訳が日本語と韓国語の翻訳にアップグレードされ、字幕なしのビデオやライブ会議を文字起こしして翻訳できるようになったと発表しました。リアルタイムで。対面同時通訳では、中国語、英語、日本語、韓国語、ロシア語、ポルトガル語、スペイン語、イタリア語、フランス語、ドイツ語、インドネシア語、ヒンディー語を含む 12 言語への翻訳がサポートされています。上記の機能は現在、次の 3 つの新しい携帯電話のみをサポートしています: Xiaomi MIX Fold 4 Xiaomi MIX Flip Redmi K70 Extreme Edition 2021 年には日本語と韓国語の翻訳に Xiao Ai の AI 字幕が追加される予定であると報告されています。 AI 字幕は、Xiaomi が自社開発した同時通訳技術を使用し、より高速で安定した正確な字幕読み取り体験を提供します。 1. 公式声明によると、Xiaoai Translator はオーディオおよびビデオ会場でのみ使用できるわけではありません

Sogou ブラウザを翻訳する方法 Feb 01, 2024 am 11:09 AM

Sogou ブラウザはどのように翻訳しますか?普段、Sogou ブラウザを使って情報を確認していると、すべて英語の Web サイトに遭遇します。英語が理解できないため、Web サイトを閲覧するのは非常に難しく、これも非常に不便です。あなたはこの状況に遭遇します！ Sogou Browser には翻訳ボタンが組み込まれています。ワンクリックするだけで、Sogou Browser は Web ページ全体を自動的に翻訳します。操作方法がわからない場合は、Sogou Browser で翻訳する具体的な手順を編集者がまとめていますので、フォローして読み進めてください。 Sogou Browser を翻訳する方法 1. Sogou Browser を開き、右上隅の翻訳アイコンをクリックします 2. 翻訳テキストの種類を選択し、翻訳する必要があるテキストを入力します 3. Sogou Browser がテキストを自動的に翻訳します。この時点で、上記総合ブラウジングの操作は完了です。

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

Java と WebSocket の組み合わせ: リアルタイムのビデオストリーミングを実現する方法 Dec 17, 2023 pm 05:50 PM

インターネット技術の継続的な発展に伴い、リアルタイムビデオストリーミングはインターネット分野における重要なアプリケーションとなっています。リアルタイムのビデオストリーミングを実現するための主要なテクノロジには、WebSocket と Java が含まれます。この記事では、WebSocket と Java を使用してリアルタイムのビデオストリーミング再生を実装する方法を紹介し、関連するコード例を示します。 1. WebSocket とは WebSocket は、単一の TCP 接続で全二重通信を行うためのプロトコルであり、Web 上で使用されます。

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript：リアルタイム監視システムを実現するためのキーテクノロジーはじめに：インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイムオンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

Google Chromeの組み込み翻訳が失敗する問題を解決するにはどうすればよいですか? Mar 13, 2024 pm 08:46 PM

ブラウザには翻訳機能が搭載されていることが多いので、外国語のサイトを閲覧しても理解できないという心配はありません！ Google Chromeも例外ではありませんが、一部のユーザーは、Google Chromeの翻訳機能を開いたときに、応答がなかったり、失敗したりすることがあります。私が見つけた最新の解決策を試してみてください。操作チュートリアル: 右上隅の 3 つの点をクリックし、[設定] をクリックします。 [言語の追加] をクリックし、英語と中国語を追加し、次の設定を行います。英語の設定では、Web ページをこの言語で翻訳するかどうかを尋ねられます。中国語の設定では、この言語で Web ページが表示されます。中国語はその前に先頭に移動する必要があります。をデフォルトの言語として設定できます。 Web ページを開いて翻訳オプションが表示されない場合は、右クリックして [中国語翻訳] を選択し、[OK] をクリックします。

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック