之前我们讲到了使用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，即可实现一个谷歌翻译爬虫网页。