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


相关文章
|
2月前
|
Java API 数据库
构建RESTful API已经成为现代Web开发的标准做法之一。Spring Boot框架因其简洁的配置、快速的启动特性及丰富的功能集而备受开发者青睐。
【10月更文挑战第11天】本文介绍如何使用Spring Boot构建在线图书管理系统的RESTful API。通过创建Spring Boot项目,定义`Book`实体类、`BookRepository`接口和`BookService`服务类,最后实现`BookController`控制器来处理HTTP请求,展示了从基础环境搭建到API测试的完整过程。
48 4
|
2月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
113 3
|
2月前
|
存储 移动开发 大数据
HTML5 Web IndexedDB 数据库详解
IndexedDB 是一种高效的浏览器存储方案,允许在本地存储大量结构化数据,支持索引和事务,适用于需要离线和大数据处理的应用。它由数据库、对象仓库等组成,通过键值对存储数据,确保数据一致性和完整性。本介绍展示了如何创建、读取、更新和删除数据,以及事务和错误处理的最佳实践。
|
21天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
37 1
|
2月前
|
Web App开发 前端开发 JavaScript
Web开发者必收藏的10个实用网站,你还没收藏吗?
将这些网站收藏起来,定期访问,使它们成为您日常工作的一部分,助您在快速发展的 Web 开发领域保持领先。
109 2
Web开发者必收藏的10个实用网站,你还没收藏吗?
|
27天前
|
人工智能 搜索推荐 PHP
PHP在Web开发中的璀璨星辰:构建动态网站的幕后英雄###
【10月更文挑战第25天】 本文将带您穿越至PHP的宇宙,揭示其作为Web开发常青树的奥秘。通过生动实例与深入解析,展现PHP如何以简便、高效、灵活的姿态,赋能开发者打造动态交互式网站,同时不忘探讨其在新时代技术浪潮中面临的挑战与机遇,激发对技术创新与应用的无限思考。 ###
32 1
|
28天前
|
JSON API 数据格式
如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架
本文介绍了如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架,适合小型项目和微服务。文章从环境准备、创建基本Flask应用、定义资源和路由、请求和响应处理、错误处理等方面进行了详细说明,并提供了示例代码。通过这些步骤,读者可以快速上手构建自己的RESTful API。
29 2
|
2月前
|
监控 负载均衡 API
Web、RESTful API 在微服务中有哪些作用?
在微服务架构中,Web 和 RESTful API 扮演着至关重要的角色。它们帮助实现服务之间的通信、数据交换和系统的可扩展性。
48 2
|
2月前
|
人工智能 搜索推荐 API
用于企业AI搜索的Bocha Web Search API,给LLM提供联网搜索能力和长文本上下文
博查Web Search API是由博查提供的企业级互联网网页搜索API接口,允许开发者通过编程访问博查搜索引擎的搜索结果和相关信息,实现在应用程序或网站中集成搜索功能。该API支持近亿级网页内容搜索,适用于各类AI应用、RAG应用和AI Agent智能体的开发,解决数据安全、价格高昂和内容合规等问题。通过注册博查开发者账户、获取API KEY并调用API,开发者可以轻松集成搜索功能。
|
2月前
|
移动开发 人工智能 前端开发
介绍一些免费 的 html 5模版网站 和配色 网站
介绍一些免费 的 html 5模版网站 和配色 网站
292 3