使用Web Speech API实现语音文本互转
本教程中,我们将尝试使用Web Speech API,这是一个非常强大的浏览器接口,可以用来记录语音并将其转换为文本,同样的,也可以用来朗读字符串。
接下来进入正题,这个App应当具有以下几个功能:
- 通过语音录入或者键盘输入的方式保存笔记;
- 将笔记保存到本地;
- 显示历史笔记并可以通过语音朗读笔记;
此App无需使用任何花哨的依赖,只需使用jQuery来进行简单的DOM操作,以及Shoelace实现简单的样式,并使用CDN直接将它们包含到文件中。
完整项目地址:https://github.com/zhangrj/converting-from-speech-to-text-with-javascript
语音转文本
Web Speech API 实际上分为两个独立的接口,语音识别(识别语音并转换为文本)和语音合成(以电脑合成音阅读文本)。
作为一个免费的浏览器功能,语音识别API的准确度高得令人惊讶。几乎能识别我所有的发音,还能知道哪些词汇组合在一起能形成有意义的短语(英文),并且可以指定一些特殊字符,比如句号,问好,换行符。
首先我们需要检查用户是否有权限访问此API并提供合适的错误提示,到目前为止,只有Chrome和Firefox支持语音转文本API,其他浏览器的用户可能看到浏览器不支持该功能的提示。
try {var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;var recognition = new SpeechRecognition();
}
catch(e) {console.error(e);$('.no-browser-support').show();$('.app').hide();
}
recognition变量将允许我们访问该API所有的方法和属性,可供设置的选项有很多,此处我们只需要设置recognition.continuous为true即可,这可以使用户在录入语音时能有更长的停顿时间,大约15秒。
在使用语音识别之前,我们还需要设置一些事件处理程序,用来监听语音识别过程中的状态变化。
recognition.onstart = function() { instructions.text('语音识别功能激活!请对着麦克风讲话。');
}recognition.onspeechend = function() {instructions.text('长时间未说话,已自动关闭录音。');
}recognition.onerror = function(event) {if(event.error == 'no-speech') {instructions.text('未检测到语音,请再试一次。'); };
}
此外,还有一个非常关键的特殊事件onresult,每当用户连续快速说出一个或几个单词时,都会触发该事件,用来访问转换结果。
我们将onresult处理程序捕获的内容保存到一个全局变量中并将其显示在文本区域。
recognition.onresult = function(event) {// event 是一个SpeechRecognitionEvent 对象// 保存了所有历史捕获对象// 我们只取当前的内容var current = event.resultIndex;// 获取此前所说话的记录var transcript = event.results[current][0].transcript;// 将当前记录添加到笔记内容中noteContent += transcript;noteTextarea.val(noteContent);
}
上面的代码略微有些简化,在Android设备上,有一个非常奇怪的错误,会导致所有东西重复两次,目前官方还没有给出解决方案,我们给出如下的方案,目前来看,没有明显的问题。将该错误考虑在内,代码变为:
var mobileRepeatBug = (current == 1 && transcript == event.results[0][0].transcript);if(!mobileRepeatBug) {noteContent += transcript;noteTextarea.val(noteContent);
}
完成以上设置,即可使用语音识别功能,调用recognition的start()方法:
$('#start-record-btn').on('click',function(e) {recognition.start();
});
浏览器将会弹出提示框,请求允许获得麦克风权限。
大多数需要获得用户许可的API在非安全主机上都无法使用,所以最好确保你的网站使用https。
浏览器将会监听一段时间,将每个识别到的单词或短语转译为文本,如果按了停止按钮或者沉默几秒,监听将会自动停止:
$('#pause-record-btn').on('click', function(e) {recognition.stop();
});
至此,语音转文本部分已经完成,下面我们继续实现文本转语音。
文本转语音
语音合成使用起来更简单,可通过 speechSynthesis 对象访问该API,并且有播放、暂停等等音频方法可供使用。甚至,还可以改变音高、语速、音调。
我们的应用只需要使用speak()方法,调用一个参数,一个SpeechSynthesisUtterance类的实例。
读取字符串的所有代码如下:
function readOutLoud(message) {var speech = new SpeechSynthesisUtterance();//设置朗读内容和属性speech.text = message;speech.volume = 1;speech.rate = 1;speech.pitch = 1;window.speechSynthesis.speak(speech);
}
当此函数被调用时,机器音会读出指定的字符串。
总结
现在这个时代,语音助手比以往任何时候都受欢迎,这样一个API可以帮助我们快速构建可能理解并能讲人类语言的机器人。
为你的应用添加语音控制是一种很好的功能增强,具有视觉障碍的用户也能在语音接口中获益。
该语音合成和语音识别接口适用于多种语言,包括中文。但是有限的浏览器支持限制了它们在实际生产中的使用,如果你需要使用更可靠的语音识别功能,可以试试下面的几个第三方API:
- Google Cloud Speech API
- Bing Speech API
- CMUSphinx 以及其JavaScript版本 Pocketsphinx (都是开源的)
- API.AI 机器学习驱动的免费API
使用Web Speech API实现语音文本互转相关推荐
- 使用Web Speech API制作语音控制的音频播放器
/* For hiding / showing the extra block */ .sp_hiddenblock {margin: 2px;border: 1px solid rgb(250, 1 ...
- react-emotion_如何使用Web Speech API和Node.js构建语音转Emotion Converter
react-emotion Have you ever wondered - can we make Node.js check to see if what we say is positive o ...
- speech api_如何使用Web Speech API构建文本语音转换应用
speech api 介绍 (Introduction) Assuming that you've used several apps over the years, there is a very ...
- 使用 Web Speech API 在浏览器中朗读文本
Web Speech API有两个功能:语音合成(语音阅读)和语音识别(语音到文本的转换).SpeechSynthesis API允许您在浏览器中选择语音并大声朗读任何文本. 无论是应用程序中的语音警 ...
- 基于Web Speech API给AI语言模型加上语音功能,距离MOSS又近了一步
目录 前言 起步 实现过程 webkitSpeechRecognition speechSynthesis 小例子 遇到的问题 效果展示 总结 前言 前段时间我把微信小号接入了AI语言模型,同事们直呼 ...
- Java web speach api_HTML5 Web Speech API,让网站更有趣
Web API 变得越来越丰富,其中一个值得注意的是Web Speech API.传统的网站只能"说",这个API的出现,让网站能"倾听"用户.这个功能已经开放 ...
- chrome Web Speech API 简单的语音识别实现 win10 开启立体声混音
最近有个想法,想把网页里的英语音频转成文字,来实现简单参考的功能,有很多想法,最后实现了下面的页面. 前提:win10 系统,开启立体声混音,chrome浏览器,需要上Google win10开启立体 ...
- 使用谷歌Cloud Speech API将语音转换为文字
CSDN广告邮件太多了,邮箱已经屏蔽了CSDN,留言请转SegmentFault:https://segmentfault.com/a/1190000013591768 Google Cloud Sp ...
- 使用微软的语音识别引擎Microsoft Speech API进行语音控制
以下代码来自:http://mmcheng.net/zh/imagespirit/ 本人仅作提取: SREngine语音识别引擎封装类: #pragma once/****************** ...
最新文章
- python缩进在程序中长度统一且强制使用_Python习题纠错1
- 熵的定义(很好的方法论工具尤其第三熵增益的计算)
- offset/client/scroll一些总结
- 在线和本地两种方法构建 RAxML 进化树方法和解读
- json例子(后台取消息)
- Pat乙级1089 狼人杀-简单版
- VC++6 开发MFC扩展DLL以及MFC DLL可以包含界面
- Ajax跨域提交JSON和JSONP
- linux c 指针和内存分配内存,linux-C基础系列-内存管理(野指针).md
- Android Studio(12)----Git使用教程之本地仓库的基本操作
- python 运算符与流程控制
- C++ ------------------------- 文件的复制
- GDI+中发生一般性错误 Winform Image.Save(mstream, ImageFormat.Png)引发
- 最大乘积java_在Java中查找负数的最大乘积
- 微信小程序购物车商品单选、多选、数量变化、结算等
- linux 3.10 网卡驱动程序示例,Centos7安装万兆网卡驱动
- Linux E: 无法定位软件包
- 修改手机屏幕刷新率_手机屏幕刷新率,真是越高越好吗?
- 跟着清风学建模——拟合算法介绍及mathlab代码实现
- 北京市工作居住证的申请与办理
热门文章
- CG插画入门教程之人体动态基础与面部画法分析
- C语言(24)蛇形填数
- webstorm修改背景图片方式
- 微信小程序webview与h5通过postMessage实现实时通讯的实现
- c中输入一个十进制数,输出它的八进制二进制以及十六进制
- Air780E|阿里云|AT命令|物联网|三元组|鉴权|算法|密钥生成-阿里云物联网手动接入步骤
- setdate java_Java在PreparedStatement中使用setDate
- 康耐视Visionpro-QuickBuild Tools 使用教程
- swift Rswift 替换文件 无妄之灾 Build Phases->Copy Bundle Resrces Phase
- 原生JS实现上拉加载更多功能