激动人心!在网页上通过语音输入文字 - HTML5 Web Speech API介绍

标签: 网页 语音输入 文字 | 发表时间:2013-01-16 14:39 | 作者:hfahe
出处:http://blog.csdn.net

         很久前我曾经 提到Web Speech API,现在Chrome刚刚发布的25版本已经为桌面和Android提供了对此API的支持,这对Web开发者来说无疑是一个具有里程碑意义的事件,因为我们可以直接在Web App中原生使用语音识别技术,Web应用的新时代将会由此开启。

         控制不住激动的心情,下面我会通过示例马上给大家介绍此API的详细信息。

         Google专门提供了一个 原生示例,来演示Web Speech API。


         我们来看看实现代码。首先需要判断浏览器是否支持Web Speech API,我们通过window下是否存在webkitSpeechRecognition对象来判断。如果支持,我们创建webkitSpeechRecognition对象,并设置相关属性和事件。

if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;

  recognition.onstart = function() { ... }
  recognition.onresult = function(event) { ... }
  recognition.onerror = function(event) { ... }
  recognition.onend = function() { ... }
  ...

         continuous属性的默认值是false,代表当用户停止说话时,语音识别将结束。在这个 演示中 ,我们将它设置为true,这样即便用户暂时停止讲话,语音识别也将会继续。

         interimResults属性的默认值也是false,代表语音识别器的返回值不会改变。在这个演示中,我们把它设置为true,这样随着我们的输入,识别结果有可能会改变。仔细观看演示,灰色的文字是临时性的,有时会改变,而黑色文本是最终结果,不会改变。

         当我们点击麦克风按钮时,会触发如下代码:

function startButton(event) {
  ...
  final_transcript = '';
  recognition.lang = select_dialect.value;
  recognition.start();

         我们用recognition.lang来设置语音识别的语言,在这个示例中默认为HTML页面的语言,通过下拉列表用户可以进行更换,例如“cmn-Hans-CN”代表普通话,而“en-us”代表美式英语。Chrome浏览器的语音识别支持众多的语言,非常强大。

         设置语言后,我们调用recognition.start()来激活语音识别。一旦开始捕获音频,它调用onstart方法,然后为每一个新的结果集调用onresult方法进行处理。

  recognition.onresult = function(event) {
    var interim_transcript = '';

    for (var i = event.resultIndex; i < event.results.length; ++i) {
      if (event.results[i].isFinal) {
        final_transcript += event.results[i][0].transcript;
      } else {
        interim_transcript += event.results[i][0].transcript;
      }
    }
    final_transcript = capitalize(final_transcript);
    final_span.innerHTML = linebreak(final_transcript);
    interim_span.innerHTML = linebreak(interim_transcript);
  };
}

         这个handler把结果分成两个字符串:final_transcript和interim_transcript。这里调用Linebreak方法来进行分段。最后,它会将final_transcript设置为final_span的innerHTML,显示为黑色;而将interim_transcript设置为interim_span的innerHTML,显示为灰色。

         以上就是功能核心代码。当recognition.start()被调用时,麦克风识别动画开始显示,同时Chrome需要获得用户对麦克风的授权。有一点非常重要的是,HTTPS网页不需要反复获取授权,而HTTP网页需要。

         当开始语音输入、捕获和识别时,我们还会在桌面右下角看到相关提示。


         从现在开始,Web App的开发者们可以好好考虑考虑,利用Web Speech API能够开发出什么样有趣的产品,或者为自己的产品添加什么有趣的功能?

         提示:如果要体验文中的Demo,请使用Chrome 25以上的版本或者Chrome Canary。

         相关文章:《 对HTML5 Device API相关规范的解惑

         参考文章: VOICE DRIVEN WEB APPS: INTRODUCTION TO THE WEB SPEECH API

         转载请标明出处: 蒋宇捷的专栏

作者:hfahe 发表于2013-1-16 22:39:13 原文链接
阅读:10 评论:0 查看评论

相关 [网页 语音输入 文字] 推荐:

激动人心!在网页上通过语音输入文字 - HTML5 Web Speech API介绍

- - CSDN博客推荐文章
         很久前我曾经 提到过 Web Speech API,现在Chrome刚刚发布的25版本已经为桌面和Android提供了对此API的支持,这对Web开发者来说无疑是一个具有里程碑意义的事件,因为我们可以直接在Web App中原生使用语音识别技术,Web应用的新时代将会由此开启.          控制不住激动的心情,下面我会通过示例马上给大家介绍此API的详细信息.

[多图]QQ2011语音输入试用

- 海坡 - cnBeta.COM
2011年已经过去了一大半,腾讯的拳头产品QQ2011正式版本终于有望出炉了. 日前腾讯在其体验中心正式开放了QQ2011正式版优先体验申请,有兴趣的朋友可以前往试试看. QQ2011的语音输入在我看来是一大亮点.

Android版谷歌拼音输入法增加语音输入

- 太平犬 - Google 黑板报 - Google (谷歌)中国的博客网志,走近我们的产品、技术和文化
在刚刚发布的Android版谷歌拼音输入法1.4.0版本中,我们新增加了语音输入功能. 语音输入功能目前还是一个测试性的功能,支持中英文的语音输入(用户的Android系统版本需要为2.2版本及以上). 用户下载安装新的1.4.0版本, 在“设置-语音和键盘”中开启谷歌拼音输入法之后,在T9和全键盘模式下都会看到一个语音输入的话筒标志.

讯飞语音输入法iPhone公测版发布

- Bin Chiu - cnBeta.COM
2011年8月8日,安徽科大讯飞信息科技股份有限公司发布了讯飞语音输入法(iPhone)首个公测版本. 讯飞语音输入法iPhone版集语音、手写、拼音输入于一体,延续了Android版语音、手写快速识别的优势,手机输入更加方便快捷.

关于x-webkit-speech 语音输入功能体验和总结

- - CSDN博客推荐文章
从今年开始很多网站的搜索按钮都逐渐改成了带有语音搜索的input文本框. 网页上面右键查看源码,我们不难发现,其实它只是调用了Google的API而已. 我实验了几次,例如我在淘宝语音“ 诺基亚 Window Phone Lumia 900“,对于我这个南方口音,普通话不是绝对标准的人来说,能全部返回,并且能进行空格分词,从个人而言还是非常满意的.

讯飞输入法3.0: 支持英语语音输入

- - 雷锋网
随着语音识别技术的不断发展,智能手机的语音控制、语音输入已经越来越成熟,现在的众多输入法都支持直接语音输入,不过中文输入法能语音输入英文的还比较少见,讯飞输入法日前发布了3.0版,首创国内英文语音输入模式,和普通话粤语输入一样,对着手机说英语讯飞输入法就可以帮你输入英文(当然只要你的口语不是太蹩脚的话).

中文字体网页开发指南

- - 阮一峰的网络日志
字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比 英文字体,中文字体的网页开发有着极大的局限性. 因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体. (*注:确实有 网站提供中文字体的web服务,从技术角度,我认为这样做不可取.

谷歌拼音输入法升级到 2.6.17.98,增加语音输入

- 可可 - 谷奥——探寻谷歌的奥秘
很多谷歌拼音输入法的用户都发现他们已经自动更新到了2.6.17.98版本,除了修复分类词库的兼容性问题以外,这次还特别加入了一个新功能:语音输入,但需要联网才可使用,很明显语音识别库并未装载到用户的电脑里,需要Google在云端处理. Via Google拼音输入法,感谢 Dean Lee 提供截图.

增加笔画输入 讯飞语音输入法新版发布

- Jet - cnBeta.COM
安徽科大讯飞信息科技股份有限公司发布了讯飞语音输入法(Android)v1.3.1079 beta版. 新版本的讯飞语音输入法增加笔画输入和标点符号配对功能,手机输入更加方便快捷.