前些天突然想到要把tts镶到网页上,貌似到处都在提到的可访问性总是拿盲人来举例子很是不好,尽管有屏幕阅读器这玩意但其实让网页直接阅读不是来的更痛快些么。
想起了牛X的谷歌童鞋有个叫谷歌翻译的神器,所以借此搞一下。
用chrome抓取到原来生成的tts地址是酱紫的
http://translate.google.cn/translate_tts?ie=UTF-8&q=
酱紫的&tl=zh-CN;
这玩意到底用神马打开确实是个棘手的问题,但是无意间发现把它直接丢到网页里也好,就像扔图片一样,但是为了防止页面刷新,还是偷偷的用了下会遭w3c骂的iframe。but!
但是意淫着依旧要通过w3c于是用jquery
$("#元素").append(代码块);最早的方案:
$("#click").click(function(){
var $makeIframe =$("<iframe id='vc' border=1 name=lantk src='' width=4 height=4 frameBorder='0'></iframe>");
$("#iframeBox").append($makeIframe);
var googleUrl = "http://translate.google.cn/translate_tts?ie=UTF-8&q=";
var mannaRead = $("#click a").text();
var tail = "&tl=zh-CN";
var mannaFood = googleUrl+mannaRead+tail;
$("#vc").attr("src",mannaFood);
});
看不到啊看不到。
可是在我可爱的chrome下还好,其他的一律不鸟我。
于是放弃iframe改用embed 结果同上,于是接着改成object,终于终于可以在opera下也出声了。
改进方案:
$("#click").click(function(){
//object块生成
var object_1 ="<object id='speaker' classid='2398E32F-5C6E-11D1-8C65-0060081841DE' width='17' height='15' ><embed src='http://translate.google.cn/translate_tts?ie=UTF-8&q=";
var mannaRead = $("#click a").text();
var object_2 ="&tl=zh-CN' width='0' height='0'></embed> </object>";
var objectNew=object_1+mannaRead+object_2;
//object结束
$("#iframeBox").append(objectNew);
});
目前支持的浏览器为
chrome opera safari最新地址:
http://orz-i.com/test/translate_test_02.html一定要点击文字!important 才会读哦,尽管读的很蛋痛。