파트1에 이어서 이번에는 좀 더 기능을 추가해 보기로 하자. 앞서 크롬 브라우저에서 음성을 인식하고 텍스트를 화면에 출력해 주는 것 까지 구현이 되었다. 여기다 한글 텍스트를 영문으로 번역하고 그 결과를 음성으로 읽어 주는 기능을 추가하자. 번역 API를 찾아 보니 몇가지 대안이 있는데 강력한 후보이 구글번역 API가 유료로 전환된듯 결제설정을 하라고 나온다. 이런…
- 구글 Translate API
- Microsoft Azure Translate API
- Yandex
구글은 유료(정확하지 않음)이고 마이크로소프트는 12개월 무료인데 그후엔 유료라고 한다. 결국 선택한것은 Yadex라는 API 서비스이다. 그런데 문제는 번역 품질이 시원찮다. 일단 흐름을 파악하기 위해서 이것을 이용해 보기로 하자.
https://tech.yandex.com/translate/
위 링크에서 회원가입을 하고 API 키를 발급 받아야 한다.
function translate_yandex(txt){
var url = "https://translate.yandex.net/api/v1.5/tr.json/translate",
keyAPI = "your_yandex_api_key";
var xhr = new XMLHttpRequest(),
textAPI = txt;
langAPI = "en";
// https://translate.yandex.net/api/v1.5/tr.json/translate
// ? key=<API key>
// & text=<text to translate>
// & lang=<translation direction>
// & [format=<text format>]
// & [options=<translation options>]
// & [callback=<name of the callback function>]
data = "key="+keyAPI+"&text="+textAPI+"&lang="+langAPI;
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
xhr.onreadystatechange = function() {
if (this.readyState==4 && this.status==200) {
var res = this.responseText;
console.log(res);
//document.querySelector('#json').innerHTML = res;
var json = JSON.parse(res);
if(json.code == 200) {
console.log(json.text[0]);
english.innerHTML = json.text[0];
text_to_speech(json.text[0]);
}
else {
console.log("Error Code: " + json.code);
//document.querySelector('#output').innerHTML = "Error Code: " + json.code;
}
}
}
}
함수를 추가하자. 앞 파트1에서 나온 음성인식 결과를 인자로 넣어서 호출해 주면 된다.
데모링크 : https://timbuktu031.github.io/voice_recogintion/
