通过 Google AJAX 语言 API,您可以翻译和检测只使用 Javascript 的网页中的文本块的语言。
由于 API 是新开发的产品,因此可能会存在缺陷,文档也不尽完美。请耐心等待这些问题的解决,同时也欢迎加入 Google AJAX API 开发人员论坛来提供您的反馈以及共同讨论 API 问题。
此文档适用于熟悉 JavaScript 编程和面向对象编程概念的用户。您可以在网络上找到许多 JavaScript 教程。
查看简单的实例是开始学习此 API 的最简单方法。以下示例将会检测指定文本的语言,然后将其翻译为英语。
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = document.getElementById("text").innerHTML;
google.language.detect(text, function(result) {
if (!result.error && result.language) {
google.language.translate(text, result.language, "en",
function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="text">你好,很高興見到你。</div>
<div id="translation"></div>
</body>
</html>
您可以在此处查看此示例。或在代码园地新增!中编辑并调试相似的示例。
要在您的网页中添加 Google AJAX 语言 API,请使用 Google AJAX API 载入程序。这种常用的载入程序使您可以载入您所需的所有 Google AJAX API,包括 Google AJAX 语言 API。您需要添加 Google AJAX API 脚本标签并调用 google.load("language",
"1"):
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
</script>
第一个脚本标签会载入 google.load 函数,它使您可以载入各个 Google API。google.load("language", "1") 将会载入 1 版的 Google 语言 API。目前,Google AJAX 语言 API 为 1 版,但将来可能会推出新版本。有关详细信息,请参见下面的版本管理讨论。
google.load 的第二个参数是您所使用的 Google AJAX 语言 API 的版本。目前,Google AJAX 语言 API 为 1 版,但将来可能会推出新版本。
如果在将来对该 API 进行了重大更新,我们将更改版本号并在 Google 代码和 AJAX API 讨论组上发布通知。更新后,我们会同时支持两个版本至少一个月,以便您可以移植代码。
Google AJAX 语言 API 团队会定期更新该 API,以修复错误和改进性能。这些错误修正程序应当只会提高性能并修正错误,但是也可能会意外地使某些 API 客户端无法正常工作。请使用 AJAX API 讨论组报告此类问题。
代码园地新增!中有大量的示例,您可以编辑和调试这些示例以更好地了解如何使用此 API。
此示例展示了对 javascript 字符串所进行的简单转换。
google.language.translate("Hello world", "en", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
此示例展示了对 javascript 字符串所进行的语言检测。语言代码已返回
var text = "¿Dónde está el baño?";
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: " + language + "";
}
});
浏览器和操作系统可能会不支持特殊 Unicode 字体的显示。您可以检测使用您网页的用户是否支持显示指定语言的字体以便进行阅读,或是否使用了字体显示支持检测 API。请注意,此功能仅适用于 Unicode 字体。如果您的网页使用非 Unicode 字体显示,那么此功能对您不适用。如果某种指定的语言没有字体显示支持功能,我们提供了几种解决方案来解决此问题。有关详细信息,请阅读此文。
此示例展示了对字体显示支持所进行的检测。
var result = google.language.isFontRenderingSupported("hi");
var resultStr = "";
if (result == google.language.FontRenderingStatus.SUPPORTED) {
resultStr = "Rendering for " + lang + " is supported.";
} else if (result == google.language.FontRenderingStatus.UNSUPPORTED) {
resultStr = "Rendering for " + lang + " is not supported.";
} else {
resultStr = "Unsupported language " + lang + " for font detection API.";
}
var resultDiv = document.getElementById("displayResultsDiv");
resultDiv.innerHTML += resultStr;
以下示例与基础翻译示例相似,但该示例向我们展示了如何在不知道源语言的情况下翻译文本。通过将一串空字符串指定为对源语言未知,系统会在同一次调用中进行检测和翻译。
google.language.translate("Hello world", "", "es", function(result) {
if (!result.error) {
var container = document.getElementById("translation");
container.innerHTML = result.translation;
}
});
当您的应用程序使用 Google AJAX 语言 API 时,将 Google 品牌传达给您的用户非常重要。google.language.getBranding() 方法旨在帮助您实现此目的。此方法可接受 HTML DOM 元素或相应的 ID 以及可选的选项。品牌标志被附加到所提供的元素中。
// attach a "powered by Google" branding
<div id='branding'> </div>
...
google.language.getBranding('branding');
可通过 CSS 来自定义品牌标志,且品牌标志采用 'vertical' 和 'horizontal' 基本格式。以下示例向我们展示了各种格式和 CSS 自定义。
以下是两个允许一些交互的附加示例。第一个示例所进行的是对一串已预先填充的文本字符串进行语言检测,同时允许在该文本字符串中输入其他文本。此示例还展示了一些置信度和可靠性因素。此外,您还可以调试代码园地新增!中的相似示例。
第二个附加示例所进行的是翻译。同样,此附加示例也进行与上述示例相似的交互。
目前,Google AJAX 语言 API 可支持以下语言。此项技术正不断地得到改进,并且我们的团队也正不断努力来增加 Google AJAX 语言 API 所能支持的语言,因此,请经常查看支持语言列表。您还可以访问 Google 翻译来查看最新列表。
目前,Google AJAX 语言 API 可检测以上所列出的所有语言。以下列出了其中可以翻译的语言。以下列表中的任意两种语言之间都可进行翻译。要测试是否可对某种语言进行翻译,请使用 google.language.isTranslatable(languageCode);
对于 Flash 开发人员以及需要从其他非 Javascript 环境中访问 Google AJAX 语言 API 的开发人员,该 API 提供了一个简单的 RESTful 界面。在所有情况下,支持的方法均为 GET,响应格式为 JSON 已编码结果(具有嵌入的状态代码)。使用此界面的应用程序必须遵守所有现有的使用条款。需要特别注意的是要在您的请求中正确标识自己。应用程序必须始终在其请求中包含一个有效且准确的 http 参考标头。此外,我们要求(但不命令)每个请求包含一个有效的 API 密钥。通过提供密钥,您的应用程序可以向我们提供辅助的识别机制,这在我们需要联系您以纠正问题时会很有用。
开始学习此界面的最简单方法便是亲自尝试……使用命令行工具 curl 或 wget 执行以下命令:
curl -e http://www.my-ajax-site.com \
'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit'
此命令可执行 Hello World (q=hello%20world) 从英语到意大利语 (langpair=en%7Cit) 的语言翻译 (/ajax/services/language/translate)。此响应具有 Content-Type 类型的 text/javascript; charset=utf-8。从以下响应中您可以看到 responseData 与结果对象文档中所描述的属性是相同的。
{"responseData": {
"translatedText":"Ciao mondo"
},
"responseDetails": null, "responseStatus": 200}
除此响应格式以外,该协议还支持标准的 JSON-P 样式的回调,可通过指定 callback 参数来触发这类回调。此参数存在时,会将 JSON 对象作为参数传递到指定的回调中。
callbackFunction(
{"responseData": {
"translatedText":"Ciao mondo"
},
"responseDetails": null, "responseStatus": 200})
最后,该协议还支持 callback 和 context 参数。指定了这些网址参数后,响应将作为直接 Javascript 调用与 callback(context, result, status, details, unused) 的签名一起进行编码。请注意以下命令和响应之间的细微差别。
curl -e http://www.my-ajax-site.com \ 'http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=hello%20world&langpair=en%7Cit&callback=foo&context=bar'
此命令可执行语言翻译并且与先前的调用相同,但已更改为传递 callback 和 context。正确使用这些参数时,将在响应中返回 Javascript 调用(而不是 JSON 对象),并且通过 result 参数传递 JSON 对象。
foo('bar', {"translatedText":"Ciao mondo"}, 200, null)
有关此界面的完整文档,请参考类参考手册。
如果您在使用代码时遇到问题:
通过用于进行音译的 Google AJAX 语言 API,您可以在您网页的任何文本字段或文本区域中启用音译功能。这使您的网站用户能够使用英文键盘键入任何语言。
什么是音译?音译是将以一种脚本编写的单词按照发音转换为以另一种脚本编写的单词的过程。音译不应与翻译混淆,它是指对语言进行更改但是保留意思。而音译是从一种字母系统转换为另一种字母系统的单词的发音。
此文档适用于熟悉 JavaScript 编程和面向对象编程概念的用户。您可以在网络上找到许多 JavaScript 教程。您还应当从用户的角度去熟悉音译。有关如何使用音译功能的详细信息,请参见此文。
此概念文档并不完整详尽,它旨在让您快速地开始了解音译并在网页中嵌入音译。
查看简单的实例是开始学习此 API 的最简单方法。以下示例向我们展示了在北印度语之类的语言的文本区域中启用音译的过程,这样用户使用英文键盘即可键入北印度语。用户也可使用“ctrl+g”快捷键在键入英语和键入北印度语之间进行切换。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css"
type="text/css" rel="stylesheet"/>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
google.elements.transliteration.LanguageCode.HINDI,
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)<br>
<textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
</body>
</html>
Google AJAX 音译 API 在“元素”模块下被打包。要在您的网页中添加 Google 音译 API,您首先需要具有 Google AJAX API 脚本标签:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
此脚本标签将会载入 google.load 功能,此功能可使您载入各个 Google API。载入 Google 音译 API 时,对 google.load 的调用如下所示:
<script type="text/javascript">
google.load("elements", "1", {
packages: "transliteration"
});
</script>
这将会载入 1 版的音译 API。目前,Google 音译 API 为 1 版,但将来可能会推出新版本。有关详细信息,请参见下面的版本管理讨论。
google.load 的第二个参数是您所使用的 Google AJAX 语言 API 的版本。目前,Google 音译 API 为 1 版,但将来可能会推出新版本。
如果在将来对该 API 进行了重大更新,我们将更改版本号并在 Google 代码和 AJAX API 讨论组上发布通知。更新后,我们会同时支持两个版本至少一个月,以便您可以移植代码。
Google AJAX 语言 API 团队会定期更新该 API,以修复错误和改进性能。这些错误修正程序应当只会提高性能并修正错误,但是也可能会意外地使某些 API 客户端无法正常工作。请使用 AJAX API 讨论组报告此类问题。
此示例与简介部分中的基本示例非常相似,但此示例向我们展示了用于在英语键入模式和北印度语键入模式之间进行切换的控件。该控件还可实现在两个文本字段之间进行音译。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css"
type="text/css" rel="stylesheet"/>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
google.elements.transliteration.LanguageCode.HINDI,
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English & Hindi.
control.showControl('translControl', {
controlType: google.elements.transliteration.TransliterationControl.
ControlType.SINGLE_LANGUAGE_BUTTON
});
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'></div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
</body>
</html>
查看示例 (singlelangtransliteration.html)
此示例与上述示例非常相似,但此示例向我们展示了可在其中选择目标语言的控件。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css"
type="text/css" rel="stylesheet"/>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
google.elements.transliteration.LanguageCode.HINDI,
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
control.makeTransliteratable(ids);
// Show the transliteration control which can be used to toggle between
// English & Hindi and also choose other destination language.
control.showControl('translControl', {
controlType: google.elements.transliteration.TransliterationControl.
ControlType.MULTI_LANGUAGE_BUTTON
});
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'></div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
</body>
</html>
查看示例 (multilangtransliteration.html)
这是一项高级示例,它向我们展示了如何创建您的自定义控件来控制音译。您可以通过选中或取消选中复选框来在英语键入模式和北印度语键入模式之间进行切换,还可以使用下拉列表来更改目标语言。您还可以在该控件中为由 TransliterationControl 所引发的各类事件注册事件处理程序。有关可能的事件的详细信息,请参见 API 类参考。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link href="http://www.google.com/uds/modules/elements/transliteration/api.css"
type="text/css" rel="stylesheet"/>
<script type="text/javascript">
// Load the Google Transliteration API
google.load("elements", "1", {
packages: "transliteration"
});
var transliterationControl;
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
google.elements.transliteration.LanguageCode.HINDI,
transliterationEnabled: true,
shortcutKey: 'ctrl+g'
};
// Create an instance on TransliterationControl with the required
// options.
transliterationControl =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textfields with the given ids.
var ids = [ "transl1", "transl2" ];
transliterationControl.makeTransliteratable(ids);
// Add the STATE_CHANGED event handler to correcly maintain the state
// of the checkbox.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.STATE_CHANGED,
transliterateStateChangeHandler);
// Add the SERVER_UNREACHABLE event handler to display an error message
// if unable to reach the server.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_UNREACHABLE,
serverUnreachableHandler);
// Add the SERVER_REACHABLE event handler to remove the error message
// once the server becomes reachable.
transliterationControl.addEventListener(
google.elements.transliteration.TransliterationControl.EventType.SERVER_REACHABLE,
serverReachableHandler);
// Set the checkbox to the correct state.
document.getElementById('checkboxId').checked =
transliterationControl.isTransliterationEnabled();
// Populate the language dropdown
var destinationLanguage =
transliterationControl.getLanguagePair().destinationLanguage;
var languageSelect = document.getElementById('languageDropDown');
var supportedDestinationLanguages =
google.elements.transliteration.getDestinationLanguages(
google.elements.transliteration.LanguageCode.ENGLISH);
for (var lang in supportedDestinationLanguages) {
var opt = document.createElement('option');
opt.text = lang;
opt.value = supportedDestinationLanguages[lang];
if (destinationLanguage == opt.value) {
opt.selected = true;
}
try {
languageSelect.add(opt, null);
} catch (ex) {
languageSelect.add(opt);
}
}
}
// Handler for STATE_CHANGED event which makes sure checkbox status
// reflects the transliteration enabled or disabled status.
function transliterateStateChangeHandler(e) {
document.getElementById('checkboxId').checked = e.transliterationEnabled;
}
// Handler for checkbox's click event. Calls toggleTransliteration to toggle
// the transliteration state.
function checkboxClickHandler() {
transliterationControl.toggleTransliteration();
}
// Handler for dropdown option change event. Calls setLanguagePair to
// set the new language.
function languageChangeHandler() {
var dropdown = document.getElementById('languageDropDown');
transliterationControl.setLanguagePair(
google.elements.transliteration.LanguageCode.ENGLISH,
dropdown.options[dropdown.selectedIndex].value);
}
// SERVER_UNREACHABLE event handler which displays the error message.
function serverUnreachableHandler(e) {
document.getElementById("errorDiv").innerHTML =
"Transliteration Server unreachable";
}
// SERVER_UNREACHABLE event handler which clears the error message.
function serverReachableHandler(e) {
document.getElementById("errorDiv").innerHTML = "";
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
<center>Type in Indian languages (Press Ctrl+g to toggle between English and Hindi)</center>
<div id='translControl'>
<input type="checkbox" id="checkboxId" onclick="javascript:checkboxClickHandler()"></input>
Type in <select id="languageDropDown" onchange="javascript:languageChangeHandler()"></select>
</div>
<br>Title : <input type='textbox' id="transl1"/>
<br>Body<br><textarea id="transl2" style="width:600px;height:200px"></textarea>
<br><div id="errorDiv"></div>
</body>
</html>
查看示例 (customtransliteration.html)
用于进行音译的低级别的 API 使用 Google AJAX 语言 API(而非其他音译 API 所使用的元素包)。要将 Google AJAX 语言 API 添加到您的网页中,您应当使用 Google AJAX API 载入程序并遵循此处所指定的说明。
此示例展示了对 javascript 字符串所进行的简单音译。
google.language.transliterate(["Namaste"], "en", "hi", function(result) {
if (!result.error) {
var container = document.getElementById("transliteration");
if (result.transliterations && result.transliterations.length > 0 &&
result.transliterations[0].transliteratedWords.length > 0) {
container.innerHTML = result.transliterations[0].transliteratedWords[0];
}
}
});
目前,Google 音译 API 可支持从英语到以下语言的音译:
可将通过 showControl 方法显示的音译控件嵌入到网页中,方法为修改此控件所使用的 css。http://www.google.com/uds/modules/elements/transliteration/api.css 中的 css 文件定义了该控件的样式和音译建议菜单,当您点击或编辑已音译的词语时会弹出这类音译建议菜单。如果您要自定义此 css 文件,您可以下载以上 css 文件,再按照文件上方指定的说明找到您想要的样式,然后对该文件进行修改。例如,修改 goog-transliterate-indic-suggestion-menu 的 background-color 参数后,您将能够把所显示的建议菜单的背景从默认的 #F0A000 值更改为新值。
Google 音译 API 与 Google 印度语音译网站受相同浏览器的支持。Google 音译 API 可以正确地在几乎所有浏览器中载入,因此,您无需检查兼容性即可安全地载入 Google 音译 API。
有时,不同的应用程序要求使用不兼容的浏览器的用户执行不同的操作。Google 音译 API 提供了一种全局方法 google.elements.transliteration.isBrowserCompatible() 来检查兼容性,但它检测到不兼容的浏览器时没有任何自动行为。本文档中的大多数示例并不检查浏览器的兼容性,也不会显示有关早期版本的浏览器的错误消息。很明显,真正的应用程序应该对不兼容的浏览器更友好,但我们省略了此类检查以提高这些实例的可读性。
Google 音译 API 可处理许多 UTF-8 文本,因此,通过添加此元标记 <meta
http-equiv="Content-Type" content="text/html; charset=utf-8"/> 将您页面的内容类型设置为 utf-8 是非常必要的。没有此元标记,Google 印度语音译 API 将不能在您的网页中正常运行。
如果您在使用代码时遇到问题: