HTML5 Web Speech API,让网站更有趣

标签: html5 | 发表时间:2015-02-05 07:39 | 作者:江小湖Laker
分享到:
出处:http://segmentfault.com/blogs

Web API 变得越来越丰富,其中一个值得注意的是 Web Speech API。传统的网站只能“说”,这个API的出现,让网站能“倾听”用户。这个功能已经开放了一系列的用法,非常棒。

在这篇文章中,我们将看一下这项技术和建议的用法,以及如何用它来增强用户体验的一些好例子。

clipboard.png

声明:本技术比较前沿,目前该规范是W3C的“非官方编辑器的征求意见稿”(截至2014年6月6日)。它的使用方法可能和本文中的代码片有所不同。查看代码规范和发布前的测试是很有必要的。

语音合成 Speech Synthesis

该API分为两部分。首先,让我们来看看语音的合成部分——说话。如果你的网站有一些文字内容——文章主体、表单、输入框、标签等——你可以运行一些有趣的功能,设备就会把文字读给用户听。

来看看做到这一点所需要的代码。首先创建 SpeechSynthesisUtterance接口的新实例。然后指定要阅读的文本。再把这个实例添加到队列中,告诉浏览器什么时候说话。

下面的speak函数里完成了上面所述的功能 ,把想要朗读的内容作为参数。

  function speak(textToSpeak) {
   //创建一个 SpeechSynthesisUtterance的实例
   var newUtterance = new SpeechSynthesisUtterance();

   // 设置文本
   newUtterance.text = textToSpeak;

   // 添加到队列
   window.speechSynthesis.speak(newUtterance);
}

现在我们需要做的就是调用这个函数,并传入我们想要朗读的内容:

  speak('Welcome to Smashing Magazine');

SpeechSynthesisUtterance还有开始、暂停、停止功能,还能设置语言、速度、声音。停止、启动或暂停都触发一个事件,开发者可以编写这个事件来完成很多有趣的事情。

目前,语音合成只有Chrome和Safari(包括桌面和移动设备版)支持。此外,通过API提供给用户的声音在很大程度上取决于操作系统。谷歌有自己的一套给Chrome的默认声音,可以在Mac OS X,Windows和Ubuntu上使用。Mac OS X的声音也可用,所以和OSX的Safari的声音一样。你可以通过开发者工具的控制台看有哪种声音可用。

  window.speechSynthesis.getVoices();

如果你使用OS X,可以用“Zarvox”声音

语音识别 Speech Recognition

Web Speech API另一部分是语音识别,它能够识别用过从麦克风或网站应用获取的语音。

让我们通过一些代码运行。这一次,我们将创建 SpeechRecognition的新实例。因为这部分只得到了Chrome的支持,所以要添加WebKit的前缀。

  var newRecognition = webkitSpeechRecognition();

peechRecognition有相当多的属性。比如状态是可连续的,浏览器在没有接收到声音的一段时间后默认把状态设为 false,如果你想继续听,可以设为 true

  newRecognition.continuous = true;

开启和停止语音识别,使用 start()stop()

  // 开始
newRecognition.start();

// 停止
newRecognition.stop();

还可以绑定很多事件,例如: soundstartspeechstartresulterror看看这个demo

使用场景举例

听写

目前,Speech API最常见的用法是听写和读取。也就是用户通过麦克风说话,设备把语音翻译成文字(看看 Chrome开发团队做的demo),或者设备读取文字转化成语音。

设备能说话这是非常有用的功能。设想一下,当你早上起床的时候,镜子告诉你今天的天气,这多么神奇。

很多汽车都有语音系统,在你开车的时候给你导航。设想一下,当你在开车的时候,浏览器把你想要的内容读给你听,多么方便。

声音控制

听写可以很容易地变成语音控制。正如上面的例子,我们可以通过语音导航。如果把这个功能加入到网络电视的浏览器中,将会有更多有意思的实现。

我的同事做了个网球应用,在他打球的时候,它的应用会把他的分数读出来。

翻译

未来翻译会变得很不一样。一个人说了一段话,设备就翻译成对方的语言并读出。

限制

离线是需要注意的问题。目前API的实现是浏览器把数据发送到远端服务器,再把处理好的数据返回。没有网络就无法实现功能。


英文原文: Enhancing User Experience With The Web Speech API
由SegmentFault整理翻译

相关 [html5 web speech] 推荐:

HTML5 Web Speech API,让网站更有趣

- - SegmentFault 最新的文章
Web API 变得越来越丰富,其中一个值得注意的是 Web Speech API. 传统的网站只能“说”,这个API的出现,让网站能“倾听”用户. 这个功能已经开放了一系列的用法,非常棒. 在这篇文章中,我们将看一下这项技术和建议的用法,以及如何用它来增强用户体验的一些好例子. 声明:本技术比较前沿,目前该规范是W3C的“非官方编辑器的征求意见稿”(截至2014年6月6日).

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

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

【HTML5】Web Storage简析

- - 博客园_首页
什么是Web Storage. web storage是HTML5规范中提出的一种本地存储解决方案. 在这之前,我们在开发中遇到本地存储问题时,通常有两种解决方式. cookie:兼容性最好,但也有不少问题,下面会简单做下对比. 各浏览器实现的非标准化的本地存储方案,如IE的userData,firefox的global storage等,毫无疑问,最大的问题是兼容性.

HTML5的Web标准实战

- johnny - blog.moocss.com
我记得2009年下半年的时候,我就开始尝试使用HTML5的新元素,具体的说应该是HTML5的结构性元素的使用. 我使用HTML5的结构性元素重构我的博客,刚开始,查看了大量老外博客,也归纳总结了一下使用场景,在什么情况下使用HTML5的新元素代替原有的没有语义性div,还有如何组织文档内容结构也是比较头疼的事情.

HTML5 Web socket和socket.io - wishyouhappy

- - 博客园_首页
   HTML5的新特性,用于双向推送消息(例如网页聊天,手机推送消息等). client利用regular http请求webpage. 请求的webpage 执行javascript脚本,open a connection to server.. 有新的信息时服务器和客户端可以相互发送信息(Real-time traffic from the server to the client .

AT&T公布HTML5 Web应用API

- - HTML5研究小组
北京时间1月10日消息,据国外媒体报道,AT&T首席营销官大卫·克里斯托弗(David Christopher)今天在该公司第六届开发者峰会公布了面向HTML5应用的API(应用编程接口)平台API Catalog. HTML5应用可以在多种设备和移动操作系统上运行.   iPhone版Visual Voicemail将是AT&T的首款网络API.

Nokia Maps 正式推出 HTML5 web app 版

- - UNWIRE.HK 流動科技生活
看來近年寫程式的趨勢,已由以往的 native app,開始轉向採用 web app,因為後者始終不受平台限制,只要編寫一個支援 HTML-5 格式的 web app,就可以在 iPhone、iPad、Android 手機、平板、Windows Phone 手機、甚至在 Blackberry 平台的裝置上使用,對於研發程式的公司來說,確實是最具經濟效益的方法.

HTML5引领下的Web革命

- - 译言-电脑/网络/数码科技
HTML5引领下的Web革命. ACM通讯,第55卷,第7刊,16到17页 10.1145/2209249.2209256. 万维网开发人员最近表示新的HTML5标准对网络的演变过程,工作方式和使用途径而言,都是一次非凡的革新. 新的标准简化了程序运行方式,协调了各种终端设备和应用程序之间互访的入口,给用户带了让人惊喜的全新功能.

HTML5本地存储 Web Storage - 紫尘

- - 博客园_首页
Web Storage基本介绍.   HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数据的保存时长及数据的共享方式.     localStorage 一直存储在本地,数据存储是永久的,除非用户或程序对其进行删除操作;.

Web程序员们,你准备好迎接HTML5了吗?

- 小伟 - 博客园-首页原创精华区
作者: dangjian 发表于 2010-09-07 01:44 原文链接 阅读: 4674 评论: 37. HTML5作为下一代的web开发标准,其特性已经慢慢地出现在主流的浏览器中,这种新的HTML将会让浏览器不必再依赖Flash、QuickTime、Silverlight等插件,也简化了原来需要大量JS才能达到的效果.