Aufbau eines Echtzeit-Übersetzungstools auf Basis von JavaScript
Aufbau eines Echtzeit-Übersetzungstools auf Basis von JavaScript
Einführung
Mit der wachsenden Nachfrage nach Globalisierung und dem häufigen Auftreten von grenzüberschreitendem Austausch und Austausch sind Echtzeit-Übersetzungstools zu einer sehr wichtigen Anwendung geworden. Wir können JavaScript und einige vorhandene APIs nutzen, um ein einfaches, aber nützliches Echtzeit-Übersetzungstool zu erstellen. In diesem Artikel wird anhand von Codebeispielen erläutert, wie diese Funktion basierend auf JavaScript implementiert wird.
Implementierungsschritte
Schritt 1: HTML-Struktur erstellen
Zuerst müssen wir eine einfache HTML-Struktur erstellen, um unser Echtzeit-Übersetzungstool aufzunehmen. Hier ist eine Beispiel-HTML-Struktur:
<!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>Schritt 2: Stile hinzufügen
Um unser Echtzeit-Übersetzungstool zu verschönern, können wir einige grundlegende CSS-Stile hinzufügen. Hier ist ein Beispielstil:
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;
}Schritt 3: Übersetzungsfunktion implementieren
Verwenden Sie JavaScript und die Google Translate-API, um die Echtzeit-Übersetzungsfunktion zu implementieren. Fügen Sie zunächst den folgenden Code unten auf der Seite hinzu:
<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>Im obigen Code haben wir die API von Google Translate für die Übersetzung verwendet. Wir haben zuerst die JavaScript-Bibliothek von Google geladen, dann das Übersetzungstool initialisiert und dem Quelltextfeld einen Eingabeereignis-Listener hinzugefügt. Immer wenn der Benutzer Inhalte eingibt, wird dieses Ereignis ausgelöst und die Übersetzungsfunktion aufgerufen, um die Übersetzungsergebnisse zu erhalten.
Fazit
Mit den oben genannten einfachen Schritten können wir ein JavaScript-basiertes Echtzeit-Übersetzungstool erstellen. Benutzer können zu übersetzenden Text eingeben und dieser wird automatisch über die Google Translate API ins Englische oder andere Zielsprachen übersetzt. Dieses Echtzeit-Übersetzungstool kann problemlos auf die sprachübergreifende Kommunikation und Kommunikation angewendet werden.
Bitte beachten Sie, dass in den Codebeispielen die Google Translate API verwendet wird und bei der tatsächlichen Verwendung möglicherweise ein entsprechendes Abonnement und eine Authentifizierung erforderlich sind. Gleichzeitig können zur Verbesserung der Benutzererfahrung weitere Funktionen und Optimierungen hinzugefügt werden. Die obigen Codebeispiele können Ihnen jedoch als Grundlage für den Aufbau eines Echtzeit-Übersetzungstools dienen.
Referenzen
- Google Translate API-Dokumentation – https://cloud.google.com/translate/docs/reference/
Das obige ist der detaillierte Inhalt vonAufbau eines Echtzeit-Übersetzungstools auf Basis von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1358
52
Was soll ich tun, wenn die mit dem Edge-Browser gelieferte Übersetzungswebseite fehlt?
Mar 14, 2024 pm 08:50 PM
Der Edge-Browser verfügt über eine Übersetzungsfunktion, die es Benutzern ermöglicht, jederzeit und überall zu übersetzen, was den Benutzern großen Komfort bietet. Viele Benutzer sagen jedoch, dass die integrierte Übersetzungswebseite fehlt. Was soll ich dann tun? Die von mir mitgebrachte Übersetzungsseite fehlt? Auf dieser Website erfahren Sie, wie Sie die mit dem Edge-Browser gelieferte übersetzte Webseite wiederherstellen können, wenn diese fehlt. So stellen Sie die fehlende Übersetzungswebseite des Edge-Browsers wieder her 1. Überprüfen Sie, ob die Übersetzungsfunktion aktiviert ist: Klicken Sie im Edge-Browser auf das Symbol mit den drei Punkten in der oberen rechten Ecke und wählen Sie dann die Option „Einstellungen“. Wählen Sie auf der linken Seite der Einstellungsseite die Option Sprache aus. Stellen Sie sicher, dass „Übersetzen&rd“ aktiviert ist.
Machen Sie sich keine Sorgen, wenn Sie Filme ohne Untertitel ansehen! Xiaomi kündigt die Einführung von Echtzeit-Untertiteln von Xiaoai Translation für japanische und koreanische Übersetzungen an
Jul 22, 2024 pm 02:11 PM
Laut Nachrichten vom 22. Juli gab das offizielle Weibo von Xiaomi ThePaper OS heute bekannt, dass die Xiaoai-Übersetzung aktualisiert wurde. Echtzeit-Untertitel wurden zu japanischen und koreanischen Übersetzungen hinzugefügt und untertitelfreie Videos und Live-Konferenzen können transkribiert und übersetzt werden in Echtzeit. Das Simultandolmetschen von Angesicht zu Angesicht unterstützt die Übersetzung in 12 Sprachen, darunter Chinesisch, Englisch, Japanisch, Koreanisch, Russisch, Portugiesisch, Spanisch, Italienisch, Französisch, Deutsch, Indonesisch und Hindi. Die oben genannten Funktionen unterstützen derzeit nur die folgenden drei neuen Telefone: Xiaomi MIX Fold 4 Xiaomi MIX Flip Redmi K70 Extreme Edition Es wird berichtet, dass im Jahr 2021 die KI-Untertitel von Xiao Ai zu japanischen und koreanischen Übersetzungen hinzugefügt werden. KI-Untertitel nutzen Xiaomis selbst entwickelte Simultandolmetschertechnologie, um ein schnelleres, stabileres und genaueres Leseerlebnis für Untertitel zu ermöglichen. 1. Laut offizieller Aussage kann Xiaoai Translator nicht nur in Audio- und Video-Veranstaltungsorten verwendet werden
So übersetzen Sie den Sogou-Browser
Feb 01, 2024 am 11:09 AM
Wie übersetzt der Sogou-Browser? Wenn wir normalerweise den Sogou-Browser verwenden, um Informationen zu überprüfen, stoßen wir auf einige Websites, die alle auf Englisch sind. Da wir kein Englisch verstehen, ist das Durchsuchen der Website auch sehr umständlich Sie stoßen auf diese Situation! Sogou Browser verfügt über eine integrierte Übersetzungsschaltfläche. Mit nur einem Klick übersetzt Sogou Browser automatisch die gesamte Webseite für Sie. Wenn Sie nicht wissen, wie man es bedient, hat der Herausgeber die spezifischen Schritte zur Übersetzung im Sogou-Browser zusammengestellt. Wenn Sie nicht wissen, wie, folgen Sie mir und lesen Sie weiter! So übersetzen Sie Sogou Browser 1. Öffnen Sie Sogou Browser, klicken Sie auf das Übersetzungssymbol in der oberen rechten Ecke. 2. Wählen Sie die Art des Übersetzungstexts aus und geben Sie dann den zu übersetzenden Text ein. 3. Sogou Browser übersetzt den Text automatisch unter An diesem Punkt ist der obige Sogou-Browsing-Vorgang abgeschlossen. So übersetzen Sie alle Inhalte
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.
Die Kombination von Java und WebSocket: So erreichen Sie Echtzeit-Videostreaming
Dec 17, 2023 pm 05:50 PM
Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist Echtzeit-Videostreaming zu einer wichtigen Anwendung im Internetbereich geworden. Zu den Schlüsseltechnologien für Echtzeit-Videostreaming gehören WebSocket und Java. In diesem Artikel wird die Verwendung von WebSocket und Java zur Implementierung der Echtzeit-Video-Streaming-Wiedergabe vorgestellt und relevante Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist ein Protokoll für die Vollduplex-Kommunikation über eine einzelne TCP-Verbindung. Es wird im Web verwendet
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
Wie kann das Problem gelöst werden, dass die integrierte Übersetzung von Google Chrome fehlschlägt?
Mar 13, 2024 pm 08:46 PM
Browser verfügen im Allgemeinen über integrierte Übersetzungsfunktionen, sodass Sie sich keine Sorgen machen müssen, dass Sie beim Surfen auf fremdsprachigen Websites etwas nicht verstehen können! Google Chrome ist keine Ausnahme, aber einige Benutzer stellen fest, dass beim Öffnen der Übersetzungsfunktion von Google Chrome keine Reaktion erfolgt oder ein Fehler auftritt. Was sollten sie tun? Sie können die neueste Lösung ausprobieren, die ich gefunden habe. Bedienungsanleitung: Klicken Sie auf die drei Punkte in der oberen rechten Ecke und dann auf Einstellungen. Klicken Sie auf Sprache hinzufügen, fügen Sie Englisch und Chinesisch hinzu und nehmen Sie die folgenden Einstellungen vor. Die Einstellung „Englisch“ fragt, ob Webseiten in dieser Sprache übersetzt werden sollen, und Chinesisch muss davor verschoben werden kann als Standardsprache eingestellt werden. Wenn Sie die Webseite öffnen und keine Übersetzungsoption angezeigt wird, klicken Sie mit der rechten Maustaste und wählen Sie Chinesisch übersetzen, OK.
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.
