之前我们讲到了使用python爬取Google翻译(建议先阅读那篇文章),那么,我就想到了使用html+js前端来制作一个翻译网页。
思路设计
首先,我们可以使用jquery来进行POST请求,得到翻译结果。
tk的值直接复制那段js代码就行了,还省去了转换代码的步骤,直接就可以调用。
而tts语音的获取就更简单了。
实现
大致的代码框架如下:
var tk=gettk(text,'442788.2585626513');//得到tk
$.post('https://translate.google.cn/translate_a/single?client=webapp&sl='+sl+'&tl='+tl+'&dt=at&dt=bd&dt=ex&dt=ld&dt=md&dt=qca&dt=rw&dt=rm&dt=sos&dt=ss&dt=t&otf=1&ssel=0&tsel=0&tk='+tk+'&q='+encodeURIComponent(text),{ q : text },function(data, textStatus){
//console.log(data);
//进行一系列处理
}
ttk函数参考之前那篇文章,text,sl,tl和回调函数中的处理过程请按照实际情况自行修改。
注意需要将链接UTF-8转义,使用encodeURIComponent
来实现
跨域实现
其次,此段JS代码在本地测试时是会出问题的,因为我们不能直接跨域访问(Cross-Origin Resource Sharing)
这里为了简单方便,直接使用一个接口:cors-anywhere.herokuapp.com
,将其改为:
var tk=gettk(text,'442788.2585626513');
var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
$.post(http + '//cors-anywhere.herokuapp.com/'+'https://translate.google.cn/translate_a/single?client=webapp&sl='+sl+'&tl='+tl+'&dt=at&dt=bd&dt=ex&dt=ld&dt=md&dt=qca&dt=rw&dt=rm&dt=sos&dt=ss&dt=t&otf=1&ssel=0&tsel=0&tk='+tk+'&q='+encodeURIComponent(text),{ q : text },function(data, textStatus){
//进行一系列处理
}
TTS播放
而音频的播放功能,我这里是这样实现的:
在html中插入如下代码:
<div id="ttts_div_id">
<audio id="tts_autio_id" autoplay="autoplay">
<source id="tts_source_id" src="">
<embed id="tts_embed_id" height="0" width="0" src="">
</audio>
</div>
然后JS中编写函数:
function TTS(){
var ttsDiv = document.getElementById('ttts_div_id');
var ttsAudio = document.getElementById('tts_autio_id');
var ttsText = ;//此处自行修改,朗读文本
var ttsto= ;//此处自行修改,朗读语言
ttsDiv.removeChild(ttsAudio);
var tk=gettk(ttsText,'442788.2585626513');
var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
var sss = '<source id="tts_source_id" src="https://translate.google.cn/translate_tts?ie=UTF-8&q='+encodeURIComponent(ttsText)+'&tl='+ttsto+'&total=1&idx=0&tk='+tk+'&client=webapp&textlen='+ttsText.length.toString()+'">';
var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
var au2 = '</audio>';
ttsDiv.innerHTML = au1 + sss + eee + au2;
ttsAudio = document.getElementById('tts_autio_id');
ttsAudio.play();
}
调用此JS函数即可播放TTS音频。
延时处理
我是用了一个文本框(textarea)来进行实时输入获取,但是每输入一个字符就处理一次太过频繁,因此我们需要使用延时处理。
var text = document.querySelector('#abc');//假设有一个textarea的id为abc
text.addEventListener('input', function () {
$('#res').val('.....');//等待时显示的文本
clearTimeout(iTime);
iTime = setTimeout(function(){reload();}, 480);//480毫秒延时
}, false);
这样其实就是类似Google翻译的实时翻译效果。
对上述代码稍作修改,编写前端html,即可实现一个谷歌翻译爬虫网页。