Fork me on GitHub

JS制作谷歌翻译爬虫网页

发表于 | 分类于
字数统计: 819 字 | 阅读时长 ≈ 3 分钟

之前我们讲到了使用python爬取Google翻译(建议先阅读那篇文章)，那么，我就想到了使用html+js前端来制作一个翻译网页。
成品请见：https://hlwdyblog.tk/trans

思路设计

首先，我们可以使用jquery来进行POST请求，得到翻译结果。
tk的值直接复制那段js代码就行了，还省去了转换代码的步骤，直接就可以调用。
而tts语音的获取就更简单了。

实现

大致的代码框架如下：

1
2
3
4
5
6
7
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，将其改为：

1
2
3
4
5
6
7
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中插入如下代码：

1
2
3
4
5
6
<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中编写函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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)来进行实时输入获取，但是每输入一个字符就处理一次太过频繁，因此我们需要使用延时处理。

1
2
3
4
5
6
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，即可实现一个谷歌翻译爬虫网页。
成品源码可以直接参考我的，请勿抄袭，如要修改后发布请注明原作者。