有没有想过给您的网站增添语音识别的功能?比如您的用户不用点鼠标,仅仅通过电脑或者手机的麦克风发布命令,比如"下拉到页面底部”,或者“跳转到下一页”,您的网站就会执行对应命令。听起来很酷对么?然而为了实现这个功能,必须得让您网站的JavaScript脚本能够识别到这些语音输入。
这里介绍一个开源的JavaScript语言输入库,名叫annyang。
Github地址:https://github.com/TalAter/annyang
截至到2018年7月12日,这个github仓库已经有4833个Star了。
annyang实际上就是一个只有2KB大小的JavaScript脚本文件,使用起来非常方便。
下面就跟着我一起做一个Hello World应用吧,看看您通过麦克风说话的声音是如何被这个JavaScript库文件识别到的。
新建一个html文件,将下面的代码复制进去。将它部署到您本地的Tomcat或者nodejs服务器上。
<html>
<script src="annyang.min.js"></script>
<script>
if (annyang) {
var commands = {
"Hello": function() {
alert(" I have heard your voice!");
}
};
var commands2 = {
"Bye": function(){
alert("再见!");
}
}
annyang.addCommands(commands);
annyang.addCommands(commands2);
annyang.start();
}
</script>
</html>
我测试用的是Chrome。
当您第一次在浏览器里访问这个网页时,会弹出下面的Chrome对话框,提示您这个应用要使用您电脑上的麦克风。点Allow按钮即可。
这个应用有两个地方向您提示它可以接受语音输入。第一处是下图1的红色小圆圈。
第二处是一个小的麦克风图标,点击之后,可以设置允许或者禁止麦克风。我们当然是要选择允许啦,否则如何接受语音输入呢?
如果您的笔记本电脑本身也有麦克风,可以从这个下拉菜单里选择用笔记本自带的麦克风,还是用外接的麦克风。我用的是后者。
现在可以测试了。
因为代码里我给Hello这个语音绑定的执行函数是一个alert弹出对话框,所以当我对着麦克风说了一句“Hello"之后,我的浏览器立即弹出了这个对话框。
同样,说了"Bye"后,会弹出“再见”。我在响应“Bye”这个语音的函数设置了一个断点,大家通过调用栈也可以观察到annyang的处理逻辑。
从annyang的github上能看出,中文也在支持的语音之列,所以大家放心大胆地使用吧!
https://github.com/TalAter/annyang/blob/master/docs/FAQ.md
连粤语都支持,厉害了!
更多细节,请查阅annyang的官网。
https://www.talater.com/annyang/
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
相关推荐
在本篇Unity3D教程中,我们将探讨如何在Unity3D项目中调用Android设备的内置语音识别功能。首先,我们需要了解的是,Android系统已经集成了Google的语音识别服务,因此开发者无需额外安装第三方库即可实现语音识别。...
Pocketsphinx.js 是一个在浏览器上通过纯 JavaScript 实现语音识别的功能,支持 Chrome 和 Firefox 浏览器。提供录音的功能。特性:100% 纯 JavaScript API,可通过 Web Workers 录制支持 PocketSphinx 所支持的所有...
Pocketsphinx.js 是一个在浏览器上通过纯 JavaScript 实现语音识别的功能,支持 Chrome 和 Firefox 浏览器。提供录音的功能。 特性: 100% 纯 JavaScript API, 可通过 Web Workers 录制 支持 PocketSphinx 所...
所谓语音识别就是将你所说的转化成文字。Chrome 浏览器在版本25之后开始对这一特性的支持。这篇文章将会详细的介绍如何使用JavaScript进行语音识别,感兴趣的朋友们可以参考借鉴,下面来一起看看吧。
JavaScript基于语音识别的智能防诈骗预警系统的设计与实现小程序源码。JavaScript基于语音识别的智能防诈骗预警系统的设计与实现小程序源码。JavaScript基于语音识别的智能防诈骗预警系统的设计与实现小程序源码。...
【虚拟女朋友:JavaScript语音识别的简单示例】 在当今的Web开发领域,JavaScript不仅用于页面交互,还扩展到了更复杂的领域,如语音识别。"virtual-girlfriend"项目就是一个很好的例子,它展示了如何利用...
在IT领域,语音识别技术是近年来发展迅速的一个分支,它涉及人工智能(AI)和自然语言处理(NLP)。本文将详细解析"百度语音识别demo"的相关知识点,帮助开发者更好地理解和运用这一技术。 首先,我们要明白“百度...
这是使用javascript语音识别api进行的语音可控滚动。 到目前为止,它遵循11条命令。 命令如下: go up或scroll up =>向上滚动 go down scroll down或scroll down =>向下滚动 go to half =>滚动到页面的一半 scroll...
讯飞语音识别服务提供了一套完整的JavaScript SDK,允许开发者在网页中嵌入语音识别功能。开发者可以通过调用SDK中的API,设置参数如语言类型、识别率等,实现对用户语音的实时或非实时识别。例如,可以设置`...
该压缩包文件“基于Flask Web的中文自动语音识别演示系统,包含语音识别语音合成声纹识别之说话人识别源码+运行说明.zip”提供了一个完整的Web应用项目,旨在演示中文语音识别、语音合成以及说话人识别的功能。...
例如,JavaScript库如Web Speech API可以用来处理语音识别功能,而SVG动画则可能通过CSS3的`@keyframes`规则或者JavaScript的`requestAnimationFrame`方法来创建。 在实际应用中,开发者需要考虑语音识别的准确性和...
annyang语音识别是一款基于JavaScript的开源库,专为前端开发者设计,用于实现语音识别功能。在Web应用中集成annyang,可以为用户提供一种无需物理输入设备,只需通过语音交互就能控制网页的便捷方式。这个RAR压缩包...
特别是“msvoice.js”文件,很可能是包含了调用微软语音识别API的JavaScript代码,它可能包含了设置API密钥、监听麦克风、发送音频流以及接收并处理识别结果等功能。 在这个demo中,用户可以通过点击按钮启动麦克风...
在当前的数字化时代,语音识别技术已经广泛应用到各种场景中,包括智能助手、智能家居、车载导航等。在前端开发领域,结合云端API,开发者能够轻松地在网页上实现语音识别功能,为用户提供更加自然和便捷的交互体验...
这个过程涉及到人工智能、语音识别技术、WebSocket通信以及JavaScript编程。首先,我们来了解一下科大讯飞的AI语音服务。 科大讯飞是全球领先的语音技术提供商,其智能API提供了丰富的语音处理功能,包括但不限于...
【百度语音识别+合成的Demo】是一个基于百度AI平台的示例项目,它结合了百度的语音识别和语音合成功能。这个项目可以帮助开发者快速理解并应用百度的语音API,以便在自己的应用或服务中实现语音交互功能。下面将详细...
本文将详细探讨如何在React Native项目中集成科大讯飞的语音识别与语音合成功能,以及相关的JavaScript开发和混合移动开发知识。 首先,`React Native`是Facebook推出的一个开源框架,它允许开发者使用JavaScript和...
HTML5录音与百度语音识别是现代网页应用中常见的功能,特别是在教育、聊天、在线客服等领域。这个技术结合使得用户可以通过语音交互,提升了用户体验。以下是对这两个知识点的详细讲解。 **HTML5录音** HTML5的Web...
在这个例子中,“MyFirstPhoneGapPlugin”可能包含了一个JavaScript API,用于启动和控制语音识别过程,并将识别结果回传给JavaScript层。 在PhoneGap中实现语音识别的具体步骤可能包括以下几个关键点: 1. 安装...
其中,语音识别是H5提供的一项重要功能,它使得用户可以通过语音与网页进行交互,大大提升了用户体验。这篇博文将深入探讨如何利用H5实现语音识别,并介绍相关工具和技术。 一、Web Speech API H5中的语音识别主要...