投稿日: 
1年程前にHTML5の音声入力とGoogle翻訳APIを使ってこんなのを作ってみたけど、
HTML5の音声入力とGoogleの翻訳APIを試してみた | Shimabox Blog
Google翻訳APIがフリーで使えなくなっていて全然動かなくなってた。。
※参考記事
Google Translate API v2 有料化と v1廃止に伴って、Microsoft Translatorを使って見る余地はあるかもという話 – くるえるはてなくしょん
いやぁ〜、何というファ○ク。でもまぁ、そのままにしとくのも悔しいので、
こちらの記事にある通りMicrosoftの翻訳APIを試してみる事にしました。
Microsoftの翻訳APIは上記の参考記事中にもありあますが、
使ってみよう！ Windows Live SDK/API：第38回 使ってみようMicrosoft Translator｜gihyo.jp … 技術評論社
こちらの記事通りに進めたらあっさり使えました。
本当にあっさり。
完成品
んで、出来たのがこれです。
Microsoft Translation API And WebkitSpeech
※前作ったのとUI変わってません(ｷﾘｯ
というか、めちゃくちゃAPIの返答が遅いです。
※応答が遅すぎるので翻訳結果が返ってくるまではラジオボタンをdisabledにしたりとかしてます
GoogleのAPIは早かったから使えなくなってしまったのは悔やまれますなぁ。。
ソース
拙いですが一応ソースコードも晒しときます。
要素名とか、関数名とか酷いですけど勘弁です。
HTML ※input周り
<input type="text" id="webkitSpeech" x-webkit-speech lang="ja" onwebkitspeechchange="translate(this.value);" />
<input type="radio" name="langAtt" id="inputJa" class='inputLangChoiceParts' value="ja" checked="checked">
<label for="inputJa" class="label">Input Japanese</label>
<input type="radio" name="langAtt" id="inputEn" class='inputLangChoiceParts' value="en">
<label for="inputEn" class="label">Input English</label>
<div class="choiceLang firstColumn label">
<input type="radio" name="lang" id="en" class='langChoiceParts' value="en" checked="checked"><label for="en" id="langToEn">To English</label>
<input type="radio" style="display:none;" name="lang" id="ja" class='langChoiceParts' value="ja"><label for="ja" id="langToJa" class='langChoiceParts' style="display:none;">To Japanese</label>
<input type="radio" name="lang" id="zh-CHS" class='langChoiceParts' value="zh-CHS"><label for="zh-CHS">To Chinese</label>
<input type="radio" name="lang" id="ar" class='langChoiceParts' value="ar"><label for="ar">To Arabic</label>
<input type="radio" name="lang" id="fr" class='langChoiceParts' value="fr"><label for="fr">To French</label>
</div>
<div class="choiceLang label">
<input type="radio" name="lang" id="de" class='langChoiceParts' value="de"><label for="de">To German</label>
<input type="radio" name="lang" id="it" class='langChoiceParts' value="it"><label for="it">To Italian</label>
<input type="radio" name="lang" id="ru" class='langChoiceParts' value="ru"><label for="ru">To Russian</label>
<input type="radio" name="lang" id="ko" class='langChoiceParts' value="ko"><label for="ko">To Korean</label>
</div>
<div class="choiceLang label">
<input type="radio" name="lang" id="pt-PT" class='langChoiceParts' value="pt-PT"><label for="pt-PT">To Portuguese</label>
<input type="radio" name="lang" id="es" class='langChoiceParts' value="es"><label for="es">To Spanish</label>
<input type="radio" name="lang" id="nl" class='langChoiceParts' value="nl"><label for="nl">To Dutch</label>
</div>
<div id="resultArea">
<textarea id="result"></textarea>
</div>
javascript ※ajaxがあったのでjQueryを利用
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
jQuery(function($){
// 翻訳を行う ※global
translate = function(text){
var fromLang = $('#webkitSpeech').attr('lang'),
toLang = getToLang();
obtainResult(text, fromLang, toLang);
};
// Event付与
var addEvents = function(){
$("input[name='langAtt']:radio").change(function(){
setAttributeLang($(this).val());
});
$("input[name='lang']:radio").change(function(){
changeLang();
});
$('#webkitSpeech').keyup(function(){
translate($(this).val());
});
};
// API result
var obtainResult = function(text, fromLang, toLang, doRecursive){
$.ajax({
type: "GET",
url: "http://api.microsofttranslator.com/V2/Ajax.svc/Translate",
dataType: "jsonp",
data: {
appId: appId, // 取得したBing APIのApplication ID
text: text,
from: fromLang,
to: toLang
},
jsonp: "oncomplete",
beforeSend : function(){
// 返答が遅いのでチェックボックスをdisabledに
$('input:radio').attr('disabled', true);
},
success : function(ret){
$('#result').val(ret);
// disabled解除
$('input:radio').attr('disabled', false);
// 翻訳結果を入力BOXに移してもう一度翻訳
if(doRecursive === true){
$('#webkitSpeech').val(ret);
translate(getInputBoxValue());
}
},
error : function(XMLHttpRequest, textStatus, errorThrown){
$('#result').val(textStatus);
$('input:radio').attr('disabled', false);
}
});
}
// 何語に翻訳するか
var getToLang = function(){
return $('input[name=lang]:checked').val();
}
// 入力言語(ja or en)の設定
var setAttributeLang= function(val){
$('#webkitSpeech').attr('lang', val);
changeDisplayLang(val);
changeAttributeLang(val);
}
// htmlの表示変更(入力言語変更後)
var changeDisplayLang = function(val){
var jaEle = $('#ja'),
enEle = $('#en'),
langToEn = $('#langToEn'),
langToJa = $('#langToJa');
if(val === 'ja'){
jaEle.css('display', 'none');
langToJa.css('display', 'none');
enEle.css('display', 'inline');
langToEn.css('display', 'inline');
if(jaEle.attr('checked') === 'checked'){
enEle.attr('checked', 'checked');
}
}else if (val === 'en'){
enEle.css('display', 'none');
langToEn.css('display', 'none');
jaEle.css('display', 'inline');
langToJa.css('display', 'inline');
if(enEle.attr('checked') === 'checked'){
jaEle.attr('checked', 'checked');
}
}
};
// 入力言語(ja or en)変更時処理
// 翻訳結果文字列を翻訳して入力BOXに移してからもう一度翻訳させる
var changeAttributeLang = function(fromLang){
var toLang = getToLang(),
inputFromLang = fromLang === 'en' ? 'ja' : 'en',
inputToLang = fromLang === 'en' ? 'en' : 'ja';
obtainResult(
getInputBoxValue(),
inputFromLang,
inputToLang,
doRecursive = true // もう一度APIを叩かせる
);
}
// 入力BOXの文字列取得
var getInputBoxValue = function(){
return $('#webkitSpeech').val();
}
// 翻訳言語変更
var changeLang = function(){
translate(getInputBoxValue());
}
// addEvent
addEvents();
});
</script>
余談
ちなみにdemoではajaxでサーバーに投げてphpのfile_get_contentsで
翻訳結果を取得してます。※appidあんまり見せたくし
で、そうすると何故か翻訳結果がダブルクォーテーションで囲まれて返ってくるのでダブルクォーテーションを取り除いてから翻訳結果を表示しています。
翻訳結果にこんな関数を挟んでます。※demoのソース参照
var doublequotationTrim = function(str){
var len = str.length;
return str.substr(1, len).substr(0, len - 2);
}
いやぁ、それにしてもめっちゃ応答遅いっすわぁ。。
それとも、他に早くする方法とかあるのかなぁ？？？Helpっす。。
