背景

在输入方式上,人们总是在追寻一种更高效,门槛更低的方式,来降低用户使用产品的学习成本。语音输入也是一种尝试较多的方式,有些直接使用语音(如微信语音聊天),有些需要将语音转化为文字(语音识别)。接下来的内容是一次在pc浏览器上进行语音识别输入的一种尝试。 ### 实现 调研阶段,chrome是支持语音识别的。它支持了一系列的接口,可以进行语音识别。参考HTML5的Speech API相关标准的现状
但是使用这些接口有一些困难,连不上服务器。此路不通。

那么,可以使用笨点儿的方法,先录音再上传到指定语音识别服务器,进行语音识别。这里使用的是百度语音开放平台(http://yuyin.baidu.com/)的语音识别接口,支持8k,16k的单声道的wav文件,或者pcm。尝试了8k的识别效果,跟16k的差了好远。就使用了16k,单声道wav文件,上传到语音识别服务器。

关于录音,主要步骤就是使用navigator.getUserMedia来获取用户的输入设备,成功之后使用webkitAudioContext来创建音频实例。在录音结束之后,将录音的流导出为文件,上传即可。录音的可以参考这个recorder.js,只要稍微做一下修改就可以应用。其中需要处理音频采样率,默认的采样率为44.1k,这里需要做一个转换,具体方法可以参考HTML5网页录音和压缩,边猜边做

在浏览器扩展中,没有明确的方式去获取用户对录音的授权。可以在扩展的optionpage里面申请授权,之后在扩展的所有页面都有权限了。在较新的chrome浏览器里测过可以用。参考这里:How do I give webkitGetUserMedia permission in a Chrome Extension popup window

demo

这里有一个chrome扩展的demo,实现了通过语音采样,生成wav文件上传到语音识别服务器的功能。其中做了一个比较简单的端点检测,通过音量的大小来确定输入的完成。
http://github.com/veizz/speec...
一些思考 * demo其实是用来参与公司举办的一届hackathon比赛,主要实现了语音在线识别,文字播报等功能。在后期还有想法加入了一些自然语音处理的功能,可以识别一些输入指令。如『打开百度首页』、『上淘宝买衣服』等功能。会打开指定网站,自动填写输入词,执行搜索。还可以做一些小功能,比如说语音输入『查询天气』、『买电影票』等常用功能,在popup的窗口里面打开等。
一切的想法都看起来很美好,但在大家都熟悉了打字输入的今天,还有多少人愿意使用语音识别做为输入方式?而对于不会打字的人,能否使用标准的普通话来进行语音识别的输入? * 采样率的处理是通过js的文件操作来实现的。html5支持的fileapi强大如此,怪不得有人用js做视频解码器,不考虑性能的话,看起来很美好啊

参考

http://www.cnblogs.com/jz1108...
https://dvcs.w3.org/hg/speech...
http://codeartists.com/post/3...
http://stackoverflow.com/ques...
http://www.cnblogs.com/blqw/p...
http://ibillxia.github.io/blo...
http://stackoverflow.com/ques...
http://www.web-tinker.com/art...

html5网页录音和语音识别的更多相关文章

  1. HTML5网页录音和压缩,边猜边做..(附源码)

    宣传一下自己的qq群: (暗号:C#交流) 欢迎喜欢C#,热爱C#,正在学习C#,准备学习C#的朋友来这里互相学习交流,共同进步 群刚建,人不多,但是都是真正热爱C#的 我也是热爱C#的 希望大家可以 ...

  2. HTML5网页录音和上传到服务器,支持PC、Android,支持IOS微信

    准备做一个网页版聊天界面,表情啊.图片啊.上传文件啊都应该要有,视频就算了,语音还是要的. 本文记录的是在网页上用GitHub上的Recorder进行在线录音和上传到服务器,前几天升了一下级,以后有时 ...

  3. html5网页录音

    demo https://xiangyuecn.github.io/Recorder/

  4. 20款响应式的 HTML5 网页模板【免费下载】

    下面的列表集合了20款响应式的 HTML5 网页模板,这些专业的模板能够让你的网站吸引很多的访客.除了好看的外观,HTML5 模板吸引大家的另一个原因是由于其响应性和流动性.赶紧来看看. 您可能感兴趣 ...

  5. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  6. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

  7. html5网页动画总结--jQuery旋转插件jqueryrotate

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  8. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(六)媒体查询

    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...

  9. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

随机推荐

  1. Python第一讲以及计算机基础

    本周课程安排 python基础(五天) 下周课程安排 tableau图形化表制作 下下周课程安排 spss 今日内容概要 计算机发展史 计算机主要硬件 编程与编程语言 python解释器及IDE编辑器 ...

  2. JZ-043-左旋转字符串

    左旋转字符串 题目描述 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S, 请你把其循环左移K位后的序列输出.例如,字符 ...

  3. [2022-2-26] OICLASS-USACO提高组模拟赛 C·Convoluted Intervals S

    这道题非常简单啊,我看很多人都做出来了,张林昨天也讲的很明白了,那我来简单写一下: 暴力思路(10pts) 我们发现,我们只需要模拟画出一个图然后进行暴力枚举就行了. 差分+桶+加乘原理思路(100p ...

  4. Vue-表单验证-全选-反选-删除-批量删除

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. CSS样式下划线

    样式之文字下划线 第一 text-decoration: underline; 缺点是不好修改颜色 不要修改下划线的位置,优点就是一行代码解决 可以使用line-height: 20px; 也能调整位 ...

  6. Spring AOP Xml配置过程及解释

    目录 Spring AOP(基于xml) 专业术语: 基于xml的声明式AspectJ 具体实践 Spring AOP(基于xml) 目前主流的AOP框架有两个,分别是Spring AOP和Aspec ...

  7. 说说UI自动化中的PO模式

    PO模式,全称PageObject模式,即页面对象模式.将页面定位与业务操作分离. po模式有以下几个优点: 1.易读性好 2.扩展性高 3.复用性强 4.维护性好 5.代码冗余率低 了解了po模式及 ...

  8. SQL Server 2008安全加固手册

    1.身份鉴别 1.1避免使用空密码和弱口令 要求:应对登录操作系统和数据库系统的用户进行身份标识和鉴别. 目的:操作系统和数据库系统管理用户身份鉴别信息应具有不易被冒用的特点,口令应有复杂度要求并定期 ...

  9. ubuntu 16.04 设置root用户初始密码

    安装ubuntu成功后,都是普通用户权限,并没有最高root权限,如果需要使用root权限的时候,通常都会在命令前面加上 sudo .有的时候感觉很麻烦- 我们一般使用su命令来直接切换到root用户 ...

  10. vue2.x版本中computed和watch的使用入门详解-watch篇

    前言 watch顾名思义,属于vue2.x版本中,监听和观察组件状态变化的钩子函数,常见的应用场景有监听路由变化,以及父组件传递给子组件的props数据的变化等 基本使用 在使用watch的时候,需要 ...