简介
Web Speech API是HTML5技术中的一个提供原生语音识别技术的API，Google Chrome在25版之后开始支持Web Speech API，Google也提供了一个
官方实例，效果如下：
实现效果
我根据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%以上，而且能够识别“学而不思则罔”，“学而时习之”，“国破山河在”，“年年有余”，“周鸿祎”等文言文、古诗、成语、人名等特殊的语音，相当强悍。
建议大家使用Google Chrome浏览器
分享到：
相关推荐
两大方面语音识别与语音合成, 从而允许开发人员将语音技 术整合到即和应用程序的用户界面中。但 只提供了接口标准, 没有提供参考实现。随着技术的广 泛应用和语音技术的不断发展, 加之自身的完善、简 单易用、定义的...
用于语音识别的Web Speech API的Vue包装器。 Web Speech API处于试验阶段，在生产中使用之前请检查。 安装 npm i vue-web-speech 用法 通过Vue.use将插件注入到vue实例 import Vue from 'vue' import VueWebSpeech ...
C#使用微软的Speech.Recognition库实现语音识别转文字
基于Java Speech API规范的语音识别引擎的实现 sdfsdf
语音识别 训练过程 在matlab里进行程序运行
基于Java Springboot微服务，整合科大讯飞webapi、sdk、实时语音转写，分别实现语音听写、语音转写、实时语音转写功能，填写appKey信息就能运行使用，集成了Knife4j接口文档，运行之后即可在线调试，并附有markdown...
用Microsoft Speech SDK实现语音识别和语音合成,用Microsoft Speech SDK实现语音识别和语音合成.
一个基于Windows Vista speech API5.3以及WPF技术的语音识别代码
通过调用Google speech的API接口来实现语音识别，并带声波。 修改GoogleSpeech.mxml中的"http://www.google.com/speech-api/v1/recognize?xjerr=1&client=chromium&lang=zh-CN"可以修改语言的类型，默认为zh-CN，...
基于speech sdk写的语音识别程序使用mfc实现能做到在线语音识别与离线语音识别，语音文件能从内存生成也能从话筒输入
使用Google Chrome Web Speech API进行语音转文本 现场演示 正在安装 将此存储库克隆到本地计算机 git https://github.com/bensonruan/Chrome-Web-Speech-API.git 将您的本地主机指向克隆的根目录 使用Chrome...
html-语音识别合成该项目展示了如何使用Web Speech API进行识别（语音到文本）和综合（文本到语音）。开发技术网络语音API Java脚本Google Speech API（云服务）-如果主机没有语音识别软件（台式机）。局限性当前仅...
web-speech-api, 演示程序，演示了网络语音API的特性 请参见 https web-speech-api演示程序，演示了网络语音API的特性。 有关详细信息，请参阅 Web_Speech_API 。语音转换器演示运行识别演示实时插件点击屏幕上的...
此代码为测试腾讯翻译君WebAPI实现语音识别功能。
Web Speech API旨在使Web开发人员能够在Web浏览器中提供speech-input和text-to-speech输出。 Web语音API分为两个部分， 和。 此react组件支持speech synthesis ， text-to-speech 。 安装 为了安装react-speech ，...
该项目包含一个演示源代码，演示了如何使用Web Speech API为网络构建一个简单的文本语音转换语音应用程序。 这是应用程序演示的屏幕截图（无声音）： 入门 这些说明将为您提供在本地计算机上运行并运行的项目的...
使用HTML5语音识别API的语音到文本。 查看 动机 没有多少人知道浏览器中内置了一个不错的语音识别API。 也许是一些预训练的模型？RNN / LSTM体系结构？ 支持不是最好的，但是嘿！ 为什么不提供该功能（如果有）？ ...
语音识别 使用Web Speech API的语音识别 Web Speech API的SpeechRecognition接口是识别服务的控制器接口； 这也处理从识别服务发送的SpeechRecognitionEvent。 您可以在这里查看项目
语音识别在android上使用起来很方便也很简单. 但是有个前提条件,就是android机器上必须预先安装...该例子同样是使用ACTION_RECOGNIZE_SPEECH模式，我们需要实现onActivityResult方法，当语音识别结束之后的回调函数。
使用Web Speech API为React应用加入语音功能