HTML5 Web Speech API 结合Ext实现浏览器语音识别以及输入

简介


     Web Speech API是HTML5技术中的一个提供原生语音识别技术的API,Google Chrome在25版之后开始支持Web Speech API,Google也提供了一个 官方实例,效果如下:

HTML5 Web Speech API 结合Ext实现浏览器语音识别以及输入_第1张图片

实现效果


    我根据Google提供的实例中的相关实现,在Web即时通讯系统中结合Ext实现语音输入,Ext作为展示层,将识别的过程进行展示。效果如下:



    开启语音输入时,使用麦克风,浏览器会询问是否允许程序使用麦克风



    当程序监听到用户允许程序使用麦克风之后提示用户可以说话了,程序会识别用户输出的语音



    当用户输入语音后,程序将识别语音,并将识别的过程展现出来,识别的结果可能不是最终结果,下面展示的就是最终结果



    提示产生最终的识别结果,并将提示结果插入到输入框中。

代码实现


    刚才已经介绍了实现效果和语音输入的几个状态和步骤,下面介绍如何实现:
Ext.define('Leetop.WebSpeech', {
			mixins : {
				observable : 'Ext.util.Observable'
			},

			autoStart : true,

			continuous : true,

			interimResults : true,

			destroy : function() {
				this.recognition = null;
			},

			constructor : function(config) {
				var me = this;
				me.addEvents('start', 'error', 'end', 'result', 'unsupport','nomatch');
				//Ext事件机制,添加事件
				me.mixins.observable.constructor.call(me, config);
				//实例化语音识别组件
				if (me.SpeechRecognition) {
					me.recognition = new me.SpeechRecognition();
					Ext.apply(me.recognition, {
								continuous : me.continuous,
								interimResults : me.interimResults,
								onstart : Ext.bind(me.onStart, me),
								onerror : Ext.bind(me.onError, me),
								onend : Ext.bind(me.onEnd, me),
								onnomatch : Ext.bind(me.onNoMatch,me),
								onresult : Ext.bind(me.onResult, me)
							});
					//为语音识别组件绑定事件
				} else {
					//触发不支持Web Speech事件
					me.fireEvent('unsupport', me);
					console.error('Your browser does not support Web Speech!');
				}
				if (me.autoStart) {
					me.start();
				}
			},
			//是否正在监听麦克风
			recognizing : false,
			//定义语音输入组件
			SpeechRecognition : window.SpeechRecognition
					|| window.webkitSpeechRecognition
					|| window.mozSpeechRecognition
					|| window.msSpeechRecognition,
			//开始监听用户的麦克风
			start : function() {
				var me = this;
				me.recognition.lang = me.lang;
				me.recognition.start();
			},
			//停止监听用户的麦克风
			stop : function() {
				var me = this;
				this.recognizing = false;
				me.recognition.stop();
			},
			//当开始监听麦克风的时候触发start事件
			onStart : function() {
				this.recognizing = true;
				this.fireEvent('start', this, this.recognition);
			},
			//当监听麦克风发生错误时触发error事件
			onError : function(event) {
				this.recognizing = false;
				this.fireEvent('error', this, this.recognition, event);
			},
			//当输入的语音没有匹配结果时触发,目前好像没有效果
			onNoMatch : function(){
				this.fireEvent('nomatch',this,this.recognition);
			},
			//当结果监听麦克风的时候触发end事件
			onEnd : function(event) {
				this.recognizing = false;
				this.fireEvent('end', this, this.recognition);
				//this.start();
			},
			//当有识别结果产生时触发result事件
			onResult : function(event) {
				console.log(event);
				this.fireEvent('result', this, this.recognition, event);
			},
			//设置语言
			setLang : function(lang) {
				this.lang = lang;
			}
		});
    使用Speech的时候对其用Ext进行了封装,使其能够满足面向对象编程以及能够满足事件驱动编程,设置Speech的时候有两个关键属性:
me.recognition = new me.SpeechRecognition();
Ext.apply(me.recognition, {
	continuous : me.continuous,
	interimResults : me.interimResults,
	onstart : Ext.bind(me.onStart, me),
	onerror : Ext.bind(me.onError, me),
	onend : Ext.bind(me.onEnd, me),
	onnomatch : Ext.bind(me.onNoMatch, me),
	onresult : Ext.bind(me.onResult, me)
});

  continuous属性的默认值是false,代表当用户停止说话时,语音识别将结束。在这个演示中 ,我们将它设置为true,这样即便用户暂时停止讲话,语音识别也将会继续。

  interimResults属性的默认值也是false,代表语音识别器的返回值不会改变。在这个演示中,我们把它设置为true,这样随着我们的输入,识别结果有可能会改变。仔细观看演示,正在识别过程中结果是会改变的,最终的识别结果不会改变。

下面具体介绍如何使用Leetop.WebSpeech这个类,以及在界面中进行展示:
Ext.define('Leetop.messager.message.Speech', {

	extend : 'Ext.panel.Panel',

	requires : ['Ext.toolbar.Toolbar', 'Ext.layout.container.Fit',
			'Ext.menu.Manager', 'Ext.data.ArrayStore', 'Ext.data.JsonStore',
			'Ext.form.field.ComboBox', 'Leetop.WebSpeech'],

	cls : 'x-menu ux-start-menu',

	floating : true,

	shadow : true,

	iconCls : 'l-im-voice-input',

	height : 110,

	width : 275,

	title : '语音输入',

	layout : 'fit',

	//语言列表
	langs : {
		trunk : [['English'], ['中文']],
		'English' : [{
					lang : 'en-AU',
					trunk : 'English',
					country : 'Australia'
				}, {
					lang : 'en-CA',
					trunk : 'English',
					country : 'Canada'
				}, {
					lang : 'en-IN',
					trunk : 'English',
					country : 'India'
				}, {
					lang : 'en-NZ',
					trunk : 'English',
					country : 'New Zealand'
				}, {
					lang : 'en-ZA',
					trunk : 'English',
					country : 'South Africa'
				}, {
					lang : 'en-GB',
					trunk : 'English',
					country : 'United Kingdom'
				}, {
					lang : 'en-US',
					trunk : 'English',
					country : 'United States'
				}],
		'中文' : [{
					lang : 'cmn-Hans-CN',
					trunk : '中文',
					country : '普通话 (中国大陆)'
				}, {
					lang : 'cmn-Hant-TW',
					trunk : '中文',
					country : '普通话 (香港)'
				}, {
					lang : 'cmn-Hant-TW',
					trunk : '中文',
					country : '中文 (台灣)'
				}, {
					lang : 'yue-Hant-HK',
					trunk : '中文',
					country : '粵語 (香港)'
				}]
	},

	timestamp : new Date().getTime(),

	//默认语言cmn-Hans-CN是普通话 (中国大陆)的代码
	defaultLang : 'cmn-Hans-CN',

	bodyStyle : {
		paddingLeft : 10,
		paddingTop : 10,
		paddingBottom : 10
	},

	initComponent : function() {

		var me = this;

		//选择语言的下拉框
		me.trunk = Ext.create('Ext.form.field.ComboBox', {
					displayField : 'name',
					valueField : 'name',
					width : 100,
					store : Ext.create('Ext.data.ArrayStore', {
								fields : ['name'],
								data : me.langs.trunk
							}),
					editable : false,
					queryMode : 'local',
					value : '中文',
					listeners : {
						select : function(combo, records) {

						}
					}
				});

		//选择分支语言的下拉框
		me.country = Ext.create('Ext.form.field.ComboBox', {
					displayField : 'country',
					valueField : 'lang',
					width : 150,
					store : Ext.create('Ext.data.JsonStore', {
								fields : ['lang', 'trunk', 'country'],
								data : me.langs['中文']
							}),
					editable : false,
					queryMode : 'local',
					value : me.defaultLang,
					listeners : {
						select : function(combo, records) {

						}
					}
				});

		me.tbar = [me.trunk, me.country];
		
		//创建状态显示区域,这里将会显示语音识别的各种状态
		me.status = Ext.create('Ext.panel.Panel', {
					html : '语音输入尝试使用麦克风,请点击[允许]按钮,打开麦克风。',
					ui : 'plain'
				});

		me.items = [me.status];

		Ext.menu.Manager.register(me);

		me.callParent();

		//监听面板显示事件,如果第一次显示则创建Web Speech组件,并绑定事件
		me.on('show', function() {
					me.active = true;
					if (!me.speech) {
						me.speech = Ext.create('Leetop.WebSpeech', {
									lang : me.defaultLang,
									//绑定事件
									listeners : {
										start : me.onSpeechStart,
										error : me.onSpeechError,
										result : me.onSpeechResult,
										end : me.onSpeechEnd,
										unsupport : me.onSpeechUnSupport,
										scope : me
									}
								});
					} else {
						//第二次显示的时候,则重新使用麦克风
						if (me.speech.recognizing === false) {
							me.status.update('语音输入尝试使用麦克风,请点击[允许]按钮,打开麦克风。');
							me.speech.start();
						}
					}
					//当浏览器不支持WebSpeech的时候,弹出提示框提示
					if (me.unsupport === true) {
						Leetop.error('您的浏览器不支持WebSpeech!');
						me.hide();
						return;
					}
				});

		//绑定面板隐藏函数,当面板隐藏时,则停止Speech组件,停止监听麦克风
		me.on('hide', function() {
					me.active = false;
					if (me.speech) {
						me.speech.stop();
					}
				});

		me.on('deactivate', function() {
					me.hide();
				});
	},

	onSpeechNoMatch : function() {
		var me = this;
		me.status.update('无法识别,您可以尝试慢一点说。');
	},

	onSpeechUnSupport : function() {
		var me = this;
		me.unsupport = true;
		Leetop.error('您的浏览器不支持WebSpeech!');
		me.hide();
		return;
	},

	//当麦克风打开时,提示用户可以说话了
	onSpeechStart : function() {
		var me = this;
		me.status.update('麦克风已经打开,请开始说话。语音输入将会识别您的语音,并转换成文字。');
	},

	//当语音识别结束时,如果是长时间没有说话导致的识别结束则重新使用麦克风,并提示用户重新打开麦克风
	onSpeechEnd : function() {
		var me = this;
		if (me.active === true) {
			me.status.update('由于您长时间没有讲话,语音输入重新尝试使用麦克风。请点击[允许]按钮,打开麦克风。')
			me.speech.start();
		}
	},

	//当语音识别发生错误时,提示用户发生了错误
	onSpeechError : function(speech, recognition, event) {
		var me = this;
		if (event.error == 'no-speech') {
			me.status.update('没有检测到语音输入模块。');
		}
		if (event.error == 'audio-capture') {
			me.status.update('没有检测到麦克风,请确认您的电脑已经安装了麦克风。');
		}
		if (event.error == 'not-allowed') {
			if (event.timeStamp - me.timestamp < 100) {
				me.status
						.update('调用麦克风被浏览器阻止,请<a href="chrome://settings/contentExceptions#media-stream">更改浏览器设置</a>。');
			} else {
				me.status.update('调用麦克风被您拒绝。');
			}
		}
	},

	//当语音识别有识别结果产生的时候,提示用户。当最终的结果产生的时候则插入到输入框中
	onSpeechResult : function(speech, recognition, event) {
		var interim_transcript = '';
		var me = this, result;
		if (typeof(event.results) == 'undefined') {
			return;
		}
		for (var i = event.resultIndex; i < event.results.length; ++i) {
			result = event.results[i];
			//遍历识别结果
			if (result.isFinal) {
				//最终结果
				me.status.update('您在说:' + result[0].transcript
						+ '<br/>您的语音已经被识别,请继续说话。');
				me.editor.insertAtCursor(result[0].transcript);
			} else {
				//正在识别重点结果,动态展示识别过程
				me.status.update('正在识别,结果:' + result[0].transcript);
			}
		}
	},

	destroy : function() {
		var me = this;
		if (me.speech) {
			me.speech.destroy();
		}
		me.callParent();
	},

	showBy : function(cmp, pos, off) {
		var me = this;

		if (me.floating && cmp) {
			me.layout.autoSize = true;
			me.show();

			// Component or Element
			cmp = cmp.el || cmp;

			// Convert absolute to floatParent-relative coordinates if
			// necessary.
			var xy = me.el.getAlignToXY(cmp, pos || me.defaultAlign, off);
			if (me.floatParent) {
				var r = me.floatParent.getTargetEl().getViewRegion();
				xy[0] -= r.x;
				xy[1] -= r.y;
			}
			me.showAt(xy);
			me.doConstrain();
		}
		return me;
	}
});

总结及演示地址


Google Chrome的语音识别率相当高,口齿清楚的话识别率在95%以上,而且能够识别“学而不思则罔”,“学而时习之”,“国破山河在”,“年年有余”,“周鸿祎”等文言文、古诗、成语、人名等特殊的语音,相当强悍。
大家可以去 www.ibcio.com体验语音输入的效果, www.ibcio.com中的即时通讯提供了文本、视频、窗口抖动、表情、图片等即时通讯服务,大家可以去体验一下HTML5结合Ext带来的Web桌面的效果。

建议大家使用Google Chrome浏览器

你可能感兴趣的:(Web,html5,Desktop,ExtJs,WebSpeech,Leetop)