最近使用WP7的時候，裡面有一些可以用來翻譯的軟體，據說是透過Google或者Bing的一些服務做到的。剛好利用一個小空檔時間，來研究一下這些功能怎麼做的。小喵預計希望能夠達到，輸入想要翻譯的內容後，下拉挑選要翻譯的語言，按下翻譯後，就可以透過 API 翻譯出指定的語言，並且可以透過API，然後發音出來。就來看看怎麼做到這些吧!! (所需要的程式碼比想像中少很多)
緣起：
最近使用WP7的時候，裡面有一些可以用來翻譯的軟體，據說是透過Google或者Bing的一些服務做到的。剛好利用一個小空檔時間，來研究一下這些功能怎麼做的。小喵預計希望能夠達到，輸入想要翻譯的內容後，下拉挑選要翻譯的語言，按下翻譯後，就可以透過 API 翻譯出指定的語言，並且可以透過API，然後發音出來。就來看看怎麼做到這些吧!! (所需要的程式碼比想像中少很多)
畫面準備：
我們在畫面中準備以下己的控制項
- 第一個TextArea：用來輸入準備要翻譯的原文。
- 一個下拉Select：下拉選擇要翻譯成哪種語言。語言的種類請參考：(http://code.google.com/intl/zh-TW/apis/language/translate/v1/reference.html)
- 第一個按鈕(翻譯)：按下後，進行翻譯的動作
- 第二個TextArea：用來顯示翻譯的結果
- 第二個按鈕(發音)：按下後，透過Google提供的TTS發音，透過embed播放出來
- 一個div：用來放發音的embed
請輸入您要翻譯的內容：<BR>
<TEXTAREA id="org" cols="40" rows="10"></TEXTAREA><BR>
請選擇要翻譯的語言：
<SELECT id="sltLng">
<OPTION value="en">英文</OPTION>
<OPTION value="zh-TW">中文(繁體)</OPTION>
<OPTION value="zh-CN">中文(簡體)</OPTION>
<OPTION value="ja">日文</OPTION>
<OPTION value="ko">韓文</OPTION>
<OPTION value="th">泰文</OPTION>
<OPTION value="de">德文</OPTION>
<OPTION value="fr">法文</OPTION>
</SELECT>
<INPUT id="btnTrn" value="翻譯" type="button">
<HR>
翻譯結果：<BR>
<TEXTAREA id="trn" cols="40" rows="10"></TEXTAREA><BR>
<INPUT id="btnSayIt" value="發音" type="button"><BR>
<DIV id="divSayIt"></DIV>
引用JS：
我們在Head中，宣告會引用JS，分別來自 google 與 jQuery 這兩個
<SCRIPT type="text/javascript" src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type="text/javascript" src="../js/jquery.js"></SCRIPT>
撰寫相關JavaScript：
接下來就來撰寫如何做到這些功能囉：
<SCRIPT type="text/javascript">
google.load("language", "1");
$(document).ready(function ()
{
$('#btnTrn').click(btnTrn_click);
$('#btnSayIt').click(SayIt);
});
function SayIt() {
var lng = $('#sltLng').val();
var Rlt = $('#trn').val();
var strURL = 'http://translate.google.com.tw/translate_tts?q=' + Rlt + '&tl=' + lng;
var embed = '<embed src="' + strURL + '"/>';
$('#divSayIt').html(embed);
}
function btnTrn_click() {
var srcTxt = $('#org').val();
var lng = $('#sltLng').val();
google.language.detect(srcTxt,
function (result){
if (!result.error && result.language) {
google.language.translate(srcTxt, result.language, lng,
function (result) {
var trn = $('#trn');
if (result.translation) {
trn.val(result.translation);
}
}
);
}
});
}
</SCRIPT>
可以看到，程式碼其實不長，就很容易地可以做到想要的功能了。借用Google提供的服務，真的【借力使力不費力】!!
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |