我想在Web上使用tts(Text to Speech),于是特意在网上搜索了一番,找到余音WebSpeech,发现其使用十分简单,特此记录这件事。
另一方面我想了解如何动态加载JS,又如何跨域。前面看到百度文章收藏的书签、为知笔记网页剪辑工具、QQ云输入法这些范例,于是特意模仿之。我知道JQuery的$.getScript可以动态加载并执行JS,但是我想用纯JavaScript。
使用余音WebSpeech的WebSpeech.js,于是先上传到本空间。
我想用WebSpeech说的话是文本框中的内容
var words = document.getElementsByName('username')[0].value;
对于有JQuery的特定网页,也许用选择器更准确
var words = $('input[name="username"]').val();
动态加载js的方法是在网页的body的头部插入Script元素
void(function(d){
var b = d.getElementsByTagName("body")[0];
var firstsrc = b.firstChild.src;
//jquery
var words = $('input[name="username"]').val();
if(firstsrc != null && firstsrc.indexOf('WebSpeech')>-1){
console.log('loaded.');
WebSpeech.speak(words);
}
else{
var e = document.createElement('script');
e.src = 'http://feat.sinaapp.com/static/service/js/WebSpeech.js';
b.insertBefore(e, b.firstChild);
e.onload = function(){
WebSpeech.speak(words);
console.log('speaking');
}
}
}(document));
可以将js代码压缩后作为书签使用。
余音WebSpeech支持中文、粤语、数字,但对英文的支持不好,可以用于特定的页面,用来播报号码。