入力文字を英語に翻訳して読み上げる
入力した文字を英語に翻訳して読み上げます。
サンプルはこちら
http://moeten.info/js/20140712_transWord/
ソースコードはこちら
index.html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>音声翻訳読み上げテスト</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ //APIアクセストークン var g_token = ''; //初期化 /*----------------------------------------------------------------------*/ function init(){ //トークンの取得 getToken(); //イベントリスナーの登録 addEventListener(); } //トークンの取得 /*----------------------------------------------------------------------*/ function getToken() { var requestStr = "./AccessTokenAuthentication.php"; $.ajax({ url: requestStr, type: "GET", cache: true, dataType: 'text', success: function (data) { console.log( data ); g_token = data; } }); } //翻訳 /*----------------------------------------------------------------------*/ function translateWord(){ translate( $("#inputText").val() , "ja","en" ); } //翻訳 /*----------------------------------------------------------------------*/ function translate(text, from, to) { $.ajax({ url: "http://api.microsofttranslator.com/V2/Ajax.svc/Translate", type: "GET", data: { appId :"Bearer " + g_token, text:text, from : from, to : to }, jsonp : "oncomplete", dataType: 'jsonp', success: function(data) { $("#result").text(data); speakWord(); } }); } //読み上げ /*----------------------------------------------------------------------*/ function speakWord() { $.ajax({ type:"GET", url: "http://api.microsofttranslator.com/V2/Ajax.svc/Speak", dataType:"jsonp", jsonp: "oncomplete", data: { appId :"Bearer " + g_token, language : "en", format : "audio/mp3", option : "MinSize", text : $("#result").text() }, success: function (data, dataType) { //音声で出力 $("#myAudio").html('<source src="' + data + '" type="audio/mp3">').trigger('play'); }, error: function (data, dataType) { console.log( data ); } }); } //イベントリスナーの登録 /*----------------------------------------------------------------------*/ function addEventListener(){ //入力フォームエンター時 $("#inputText").keypress(function (e) { if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { //翻訳開始 translateWord(); } }); //翻訳ボタンクリック時 $("#transButton").bind("click" ,function(){ //翻訳開始 translateWord(); }); } init(); }); </script> <style type="text/css"> body{ text-align: center; } #inputText{ text-align: left; padding: 10px; font-size: 14px; line-height: 1.5; border: 1px solid gray; border-radius: 7px; width: 260px; height: 60px; margin-bottom: 13px;; } #transButton{ background: #ffc578; background: -moz-linear-gradient(top, #ffc578 0%, #fb9d23 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc578), color-stop(100%,#fb9d23)); background: -webkit-linear-gradient(top, #ffc578 0%,#fb9d23 100%); background: -o-linear-gradient(top, #ffc578 0%,#fb9d23 100%); background: -ms-linear-gradient(top, #ffc578 0%,#fb9d23 100%); background: linear-gradient(to bottom, #ffc578 0%,#fb9d23 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc578', endColorstr='#fb9d23',GradientType=0 ); padding: 5px 12px; border: 1px solid gray; border-radius: 3px; font-size: 18px; font-weight: bold; text-shadow: 1px 1px 1px white; box-shadow: 0 0 3px gray; margin-bottom: 13px; } #result{ font-size: 16px; } </style> </head> <body> <h2>音声翻訳読み上げテスト</h2> <textarea id="inputText">今日は天気が良いですね。</textarea><br/> <button id="transButton">翻訳する</button><br/> <span id="result"></span> <audio id="myAudio" ></audio> </body> </html>
APIにアクセスする際、アクセストークンの取得が必要なのが手こずりました。
OAuthによるアクセストークンの取得の説明はこちらにPHPのサンプルコードがありますので利用します。
Obtaining an Access Token
クライアントIDと秘密パスワードをこちら（Sign In）より取得して設定。
$clientID = "xxxxxxxxxxxxxxxxx"; $clientSecret = "xxxxxxxxxxxxxxxxxxx";
アクセストークンのみをjavascriptのために出力。
echo $accessToken = $authObj->getTokens($grantType, $scopeUrl, $clientID, $clientSecret, $authUrl); exit;
これで、期限付きのアクセストークンを作成することができます。
javascript側で、このアクセストークンを使用して、APIのアクセスを行っていきます。
コメントなど
先日の音声入力を使用すると日本語から英語にそのまま翻訳ができるかと思います。
旅先などで、どうしても発音が通じない時などによいかも。
