使用Web Speech API实现语音文本互转
来源:互联网 发布:微信提现赚钱软件大全 编辑:程序博客网 时间:2024/05/16 07:01
本教程中,我们将尝试使用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实现语音文本互转
- 使用VC++6.0+microsoft speech API 实现语音识别示例
- Android:使用Speech To Text API进行语音到文本转换
- HTML5 Web Speech API 结合Ext实现浏览器语音识别以及输入
- 调用科大讯飞API实现文本转语音
- HTML5 Web Speech API——通过语音输入文字
- LABVIEW调用Microsoft Speech SDK 5.1实现英文文本转语音
- 使用Google语音识别引擎(Google Speech API)
- MFC使用Google Speech API进行语音识别
- 使用Google语音识别引擎(Google Speech API)
- python使用pyttsx实现文本转语音
- 使用微软的语音识别引擎Microsoft Speech API进行语音控制
- window speech实现语音控制
- 封装微软TTS实现web系统文本转语音
- Microsoft Speech SDK 文本语音转换入门
- iOS 上语音输入 Google Speech API
- 避开Google Voice Search利用Google Speech API实现Android语音识别之Demo实现
- QT实现文本转语音
- 2017-9-15河南财经政法大学开学典礼校长致辞-向阳而立,向善而行
- 正则表达式 Regex
- 使用Spring单元测试出错
- win10 uwp MVVM 轻量框架
- 银行存钱系统可行性分析
- 使用Web Speech API实现语音文本互转
- 有关c语言结构体能否直接赋值的问题
- 千万级别数据表创建索引
- 如何在进行数据库连接到服务器时使用端口号
- java可视化监控工具
- SYSCALL_DEFINEx的定义
- JProfiler 的使用
- 计蒜客-易张彪 字符串匹配KMP
- HTPPS和HTTP的概念和区别