使用余音WebSpeech

我想在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支持中文、粤语、数字,但对英文的支持不好,可以用于特定的页面,用来播报号码。

关于本文如您有任何想法和意见,欢迎与我们联系,邮箱地址zhi@uqugu.com
您对本文有什么看法,喜欢或者不喜欢都可以发表意见。