[Javascript]利用 Google 的 API 來做一個翻譯與發音的網頁

最近使用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提供的服務,真的【借力使力不費力】!!

 

試用

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)