HTML5 Web Speech API,让网站更有趣
Web API 变得越来越丰富,其中一个值得注意的是Web Speech
API。传统的网站只能“说”,这个API的出现,让网站能“倾听”用户。这个功能已经开放了一系列的用法,非常棒。
在这篇文章中,我们将看一下这项技术和建议的用法,以及如何用它来增强用户体验的一些好例子。
声明:本技术比较前沿,目前该规范是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();
还可以绑定很多事件,例如:soundstart
、speechstart
、result
、 error
。看看这个demo。
使用场景举例
听写
目前,Speech API最常见的用法是听写和读取。也就是用户通过麦克风说话,设备把语音翻译成文字(看看Chrome开发团队做的demo),或者设备读取文字转化成语音。
设备能说话这是非常有用的功能。设想一下,当你早上起床的时候,镜子告诉你今天的天气,这多么神奇。
很多汽车都有语音系统,在你开车的时候给你导航。设想一下,当你在开车的时候,浏览器把你想要的内容读给你听,多么方便。
声音控制
听写可以很容易地变成语音控制。正如上面的例子,我们可以通过语音导航。如果把这个功能加入到网络电视的浏览器中,将会有更多有意思的实现。
我的同事做了个网球应用,在他打球的时候,它的应用会把他的分数读出来。
翻译
未来翻译会变得很不一样。一个人说了一段话,设备就翻译成对方的语言并读出。
限制
离线是需要注意的问题。目前API的实现是浏览器把数据发送到远端服务器,再把处理好的数据返回。没有网络就无法实现功能。
英文原文: Enhancing User Experience With The Web Speech API
由SegmentFault整理翻译
本文转载于:猿2048⇒https://www.mk2048.com/blog/blog.php?id=h2jkhjjahaa
原文地址:https://www.cnblogs.com/jlfw/p/12978705.html
- 某厂2016实习招聘安全技术试题答案及解析
- 3732: Network
- 洛谷P3388 【模板】割点(割顶)(tarjan求割点)
- 每天学一点Docker(3)(制作你的第一个容器)
- 1635: [Usaco2007 Jan]Tallest Cow 最高的牛
- 1653: [Usaco2006 Feb]Backward Digit Sums
- 1619: [Usaco2008 Nov]Guarding the Farm 保卫牧场
- 1682: [Usaco2005 Mar]Out of Hay 干草危机
- 1637: [Usaco2007 Mar]Balanced Lineup
- AutoFac在项目中的应用
- 每天学一点Docker(5)——了解Docker架构
- 跨站请求伪造(CSRF/XSRF)
- 我这么玩Web Api(一)
- 1624: [Usaco2008 Open] Clear And Present Danger 寻宝之路
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- SpringMvc使用Json(Java配置方式)
- 使用IDEA创建SpringMvc并整合Thymeleaf(Java配置版)
- Junit报错:Argument(s) are different! Wanted:
- RocketMQ使用过滤器filterServer(4.3版本后)
- Python+Appium运行简单的demo,你需要理解Appium运行原理!
- 网站日志分析完整实践【技术创造101训练营】
- HTML前端知识
- 掌握 AST,轻松落地关键业务「技术创作101训练营」
- 一文轻松学会linux字符设备驱动
- leetcode树之N叉树的前序遍历
- 2020-09-20:如何判断一个数是质数?
- 金九银十Android面试复习题集:关于四大组件中的Activity你了解多少?
- HaseMap的循环姿势你真的懂了吗?
- 历经14天自定义3个注解解决项目的3个Swagger难题
- VUE开发–获取DOM对象和组件对象(十九)