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


相关文章
|
8月前
|
人工智能 搜索推荐 IDE
突破网页数据集获取难题:Web Unlocker API 助力 AI 训练与微调数据集全方位解决方案
本文介绍了Web Unlocker API、Web-Scraper和SERP API三大工具,助力解决AI训练与微调数据集获取难题。Web Unlocker API通过智能代理和CAPTCHA绕过技术,高效解锁高防护网站数据;Web-Scraper支持动态内容加载,精准抓取复杂网页信息;SERP API专注搜索引擎结果页数据抓取,适用于SEO分析与市场研究。这些工具大幅降低数据获取成本,提供合规保障,特别适合中小企业使用。粉丝专属体验入口提供2刀额度,助您轻松上手!
414 2
|
8月前
|
人工智能 运维 安全
网络安全公司推荐:F5荣膺IDC全球Web应用与API防护领导者
网络安全公司推荐:F5荣膺IDC全球Web应用与API防护领导者
238 4
|
11月前
|
人工智能 前端开发 API
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
Gemini Coder 是一款基于 Google Gemini API 的 AI 应用生成工具,支持通过文本描述快速生成代码,并提供实时代码编辑和预览功能,简化开发流程。
819 38
Gemini Coder:基于 Google Gemini API 的开源 Web 应用生成工具,支持实时编辑和预览
|
9月前
|
XML JSON API
Understanding RESTful API and Web Services: Key Differences and Use Cases
在现代软件开发中,RESTful API和Web服务均用于实现系统间通信,但各有特点。RESTful API遵循REST原则,主要使用HTTP/HTTPS协议,数据格式多为JSON或XML,适用于无状态通信;而Web服务包括SOAP和REST,常用于基于网络的API,采用标准化方法如WSDL或OpenAPI。理解两者区别有助于选择适合应用需求的解决方案,构建高效、可扩展的应用程序。
|
9月前
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
Kubernetes 安全 Devops
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
296 10
有效抵御网络应用及API威胁,聊聊F5 BIG-IP Next Web应用防火墙
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
197 5
|
移动开发 HTML5
HTML5网站大观:分享8个精美的 HTML5 网站案例
本期的 HTML5 网站大观与大家分享 10 个精美的 HTML5 商业网站设计案例。HTML5 增加了很多新标签以及新特性,正引领网页技术革命。希望这些优秀的 HTML5 网站案例能帮助大家更好的学习 HTML5 网站制作。
1368 0
|
Web App开发 移动开发 JavaScript
HTML5网站大观:分享8个精美的 HTML5 网站案例
  本期的 HTML5 网站大观与大家分享 8 个精美的 HTML5 网站作品。HTML5 是现在Web开发领域的热点,越来越多的开发人员开始使用 HTML5 来开发交互性强、效果出众的Web应用和游戏。
958 0
|
6月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。