Java web speach api_HTML5 Web Speech API,让网站更有趣

news/2024/5/10 9:06:53/文章来源:https://blog.csdn.net/weixin_31225063/article/details/114279818

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

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

71bb2ab641b84fff9c697508ba6ac989.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();

还可以绑定很多事件,例如:soundstart、speechstart、result 、 error。看看这个demo。

使用场景举例

听写

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

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

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

声音控制

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

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

翻译

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

限制

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_722884.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

seo模拟点击软件_SEO点击软件是否对网站排名有帮助

SEO点击软件是否对网站排名有帮助我们在搜索引擎搜索东西时候都是以某个关键词进行搜索,然后再更具该关键词的长尾词进行详细查找。在搜索时候我们会留意网站的展现数量,如某某网站展现量多,某某网站展现少,这些都会在我们潜意识里…

php页面怎么改造mip,代码适配的网站如何进行mip改造

最近一个小站需要进行mip改造,网站是代码适配的网站。就是电脑访问返回电脑端的页面,手机端访问返回手机端的页面。网站的url是相同的。改造后在百度提供的在线验证工具中进行了测试,全部通过测试。然后在站长后台进行了提交。提交后大概等了…

Python爬虫实战之爬取网站全部图片(二)

通过python 来爬取网站内所有的图片到本地 第三篇是动态获取参数构造图片地址实现下载图片 传送门:https://blog.csdn.net/qq_33958297/article/details/82316019 这篇文章的目的是因为上一个文章里的地址已经无法访问了 考虑到可能有的新手没有办法去实验&…

如何在微软Azure上搭建个人博客网站

手动配置服务器对很多读者来说可能并不是一件容易的事。好在在Azure中,微软已经就搭建WordPress个人博客给出了一站式的解决方案,对于零基础读者来说,在Azure上搭建WordPress即意味着你无需经历繁琐的服务器配置过程。本期的教程,…

CentOS7搭建DVWA网站

Lamp架构搭建DVWA 搭建Lamp请看:https://blog.csdn.net/qq_41709494/article/details/89430834 1.下载DVWA地址:http://www.dvwa.co.uk/ 2. 安装Lamp的所有包 [rootlocalhost ~]# yum install php php-mysql php-gd httpd mariadb mariadb-server -…

记一次网站优化---图片压缩与移动端画面缩放问题

一、背景 前段时间被人吐槽自己负责的官网访问慢 其实自己平时访问的时候是有意识到的,但是没有特别放在心上 在工作的列表中优先级排的不高 最近空闲了下来,使用性能分析工具审计了一遍网站的各项指标 发现了比较严重的问题 二、问题 1、页面内容空白时…

可以发外链的网站_外链是什么意思?发外链的技巧【经验分享.视频】

外链是什么意思?外链是指网站的外链,是指一个网站所拥有的站外推广链接。把自己的网址发布到别人的网站上,这样的链接叫做外链。(可发文章的平台,如58同城、赶集网、百姓网、等外链平台)比如我在百姓网发了…

插码统计点击次数_码迷SEO内参(15) 百度快排原理及百度第三代点击排名统计系统简析...

这是码迷SEO的第42篇原创今天讲百度第三代点击排名统计系统,顺带把百度快排深度原理也刨析一下。自从19年10月份以来,百度对快排打击丝毫没有手软的迹象,码迷发现凡是采集快排模式的网站至今无一幸免,70多天了也没有起色的现象。可…

php动态保存文件名_利用百度地图写个跑腿接单的网站菜鸟教程零基础php为主

忙了几天,终于闲下来了,接着上一篇写。上一篇说怎样在手机上搭建服务器,本篇写创建hello world,第一个页面。其实看过我上几篇教程的都知道大概怎样创建了,就是一页面法。一个主页面,其他页面用函数表示&am…

网站被挂了很多链接 源码里边看不到_网站优化的50个技巧

这次写的《网站优化50个技巧》是为了让那些没有时间深究SEO技术但又想一窥SEO真相的朋友们,希望看了这些你更懂SEO!这些经验和盘托出,希望能够帮助到朋友们!这些规则就像是交通指示灯一样,按照这些规则走的&#xff0c…

多线程导出excel_seo必备网站分析工具,关键词百度搜索结果查询导出源码

seo必备网站分析工具,关键词百度搜索结果查询导出源码两个简单的版本,关于百度搜索结果的采集抓取,可以获取到竞争对手的网站,加以分析和研究,只需输入关键词和搜索页码,即可完成对于竞争对手的获取和研究&…

html5网格布局建站,CSS网格布局的示例代码

本文介绍了CSS网格布局的示例代码,分享给大家,具体如下:浏览器兼容性可以看出CSS网格布局从Safari 10.1, Firefox 52, Chrome 60,Edge 15开始受到支持。网格布局页面基本元素:OneTwoThreeFourFive样式:.wra…

访问不了_浏览器访问不了网站??

话说,总有一些时候就是见鬼了,电脑死活上不去网~最神的操作是“重启”,十有八九会解决滴。but,如果遇到你的电脑QQ啥的还能上网,唯独浏览器(部分以前可以上的去的网站)不好使,那么你应该会百度,…

iis html asp,IIS 部署 ASP.NET 网站

1. 安装 IIS从控制面板中选择“程序和功能”,选择“打开或关闭 Windows 功能”:image_1ceiq3spb1v20r806r61huh2an9.png-156.3kB将 IIS 的选项全部勾选,需要展开子级目录一个一个点,最后的状态需要为勾选状态:image_1c…

禁止查看js文件_robot文件在网站中的重要作用

大家都知道搜索引擎通过蜘蛛爬行来搜索抓取信息,robot.txt文件就是和蜘蛛交流的文件,很多人都会说介绍要怎么让蜘蛛来爬行,却很少人知道可以用robot.txt去操控蜘蛛,robot.txt用得好的话蜘蛛可以为你所用。Robots.txt是网站管理员创…

ajax url 路径怎么写_怎样编写站内的SEO——URL

这期的分享我们接着说站内SEO中的URL。一、什么是URL?URL (Uniform Resource Locator), 通常称为“web地址”,也就是我们常说的“link,链接”,是用户可读的文本,旨在替换计算机与服务器通信时使用的数字(IP地址)。URL由…

简单的物流管理网站制作源码_清远专业制作搬运公司企业网站 | 980元做一个物流搬运公司企业网站...

企业网站设计开发过程中有很多的原则。一个好的网站,设计是非常重要的,如果设计的不能吸引用户,也满足不了用户的需求,那么这个网站之前所做的努力都白费了,我们就只知道不要犯一些基本的错误,那么这个网站…

华为抓取错误日志在哪里_网站日志数据分析教程

网站日志的数据分析主要是使用相关工具进行,工具类型也有很多。网页版可以用拉格好(www.loghao.com),桌面版可以用爱站或者光年,也可以使用shell分析日志。。。分析日志的作用有很多,可以概括几点:1.了解蜘蛛对页面的抓…

HTML个人网站设计(源码)

关于前端,我觉得我是没有太多发言权的,毕竟本身对于设计这一方面并不是太感兴趣,但是学了几天吧,觉得也就这回事,考量的还是数学功底居多,前期很简单,后期的话,制作一些比较由难度的动画效果还是…

ckks方案优化最好的_如何更科学的进行SEO优化?保持排名稳定

网站SEO优化服务,常常被站长们称之为搜索引擎优化,为的是让网站参与关键词排名,获取大量展现和点击咨询,SEO让网站推广宣传变得有迹可循。一、科学制定网站SEO优化方案的前提网站在进行优化之前做好相关的优化方案对后期优化的开展…