HTML5 Web Speech API,让网站更有趣

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

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

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

image.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的实现是浏览器把数据发送到远端服务器,再把处理好的数据返回。没有网络就无法实现功能。


相关文章
|
10天前
|
弹性计算 算法 安全
视觉智能开放平台产品使用合集之在Web应用和WinForm应用程序中调用API时,出现Web端能够成功调用而WinForm端调用失败,是什么原因
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。
|
6天前
|
开发框架 安全 .NET
使用VB.NET构建Web服务和REST API的指南
【7月更文挑战第2天】使用VB.NET构建Web服务和REST API的指南:从Web服务基础到ASP.NET Core实践,涵盖控制器、路由、模型绑定、安全措施(如JWT、HTTPS)及测试、部署(Azure、Docker)与监控工具。了解如何利用VB.NET在现代云环境中创建高效、安全的API。开始你的VB.NET Web服务开发之旅!**
6 1
|
5天前
|
人工智能 前端开发 API
基于Web Speech API给AI语言模型加上语音功能,距离MOSS又近了一步
基于Web Speech API给AI语言模型加上语音功能,距离MOSS又近了一步
13 0
|
5天前
|
开发框架 JSON .NET
|
21天前
|
前端开发 JavaScript API
2024 Web 新特性 - 使用 Popover API 创建弹窗
Popover API简化了Web弹窗创建,标准化处理在所有主要浏览器中可用。它提供声明式创建弹出式菜单、提示和信息卡片,解决代码冗余和兼容性问题。弹窗自动定位在顶层,支持通过Esc键或点击外部关闭,且与触发元素语义关联。基础用法涉及`popover`和`popovertarget`属性。
26 0
|
3天前
|
NoSQL 安全 API
如何有效提升 API 接口的安全性?
**API安全关键在于验证和防刷。通过排序参数、生成签名和MD5加密确保请求合法性。使用Redis限制请求频率,防止接口被恶意刷取。验证和防刷策略结合,保护API免受攻击和滥用。**
15 0
|
9天前
|
JSON 安全 API
如何高效编写API接口:以Python与Flask为例
构建RESTful API的简明教程:使用Python的Flask框架,从环境准备(安装Python,设置虚拟环境,安装Flask)到编写首个API(包括获取用户列表和单个用户信息的路由)。运行API服务器并测试在`http://127.0.0.1:5000/users`。进阶话题包括安全、数据库集成、API文档生成和性能优化。【6月更文挑战第27天】
33 7
|
5天前
|
Java API PHP
【亲测有效,官方提供】php版本企查查api接口请求示例代码,php请求企查查api接口,thinkphp请求企查查api接口
【亲测有效,官方提供】php版本企查查api接口请求示例代码,php请求企查查api接口,thinkphp请求企查查api接口
14 1
|
9天前
|
JSON 安全 API
实战指南:使用PHP构建高性能API接口服务端
构建RESTful API的简要指南:使用PHP和Laravel,先安装Laravel并配置数据库,接着在`api.php`中定义资源路由,创建`PostController`处理CRUD操作,定义`Post`模型与数据库交互。使用Postman测试API功能,如创建文章。别忘了关注安全性、错误处理和性能优化。
20 2
|
11天前
|
人工智能 运维 Serverless
函数计算产品使用问题之启动的实例是否有调用api接口停止功能
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。