html5的新玩法——语音搜索

2016-02-19 12:17 6 1 收藏

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的html5的新玩法——语音搜索,手机电脑控们准备好了吗?一起看过来吧!

【 tulaoshi.com - Web开发 】

谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单
只需要在input添加属性x-webkit-speech即可,例子如下:

代码如下:

input type="text" x-webkit-speech /

这样你的输入框右边里就多了个「小话筒」,点击的时候就会提示

这时说出来识别后就可以了,我测试下来,中文英语的识别率还挺高的。
语音输入其他属性
lang这玩意可以强制输入框里面的语音的语言种类,例如
input type="text" x-webkit-speech lang="zh-CN"/
语音事件目前已知的只有onwebkitspeechchange,顾名思义,就是语音发生变化时触发的事件,一般可以作为提交

代码如下:

input type="text" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/

这样说完以后就自动搜索了
x-webkit-grammar这个不是语音搜索用的属性,但是可以控制这个输入的语法,例如在做搜索框的话就可以用

代码如下:

input type="text" x-webkit-speech x-webkit-grammar="bUIltin:search" /

使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如「的」
这个功能相当有趣,实用就不敢恭维了,主要是因为适用范围太小啊,所以只能希望HTML5尽快统一并应用了。
相关参考:
HTML5 语音搜索(淘宝店语音搜素)
HTML5 语音搜索只需一句代码

来源:http://www.tulaoshi.com/n/20160219/1600459.html

延伸阅读
标签: Web开发
canvas是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些canvas的应用示例,我们将会在此教程中看到他们的实现。 canvas最先在苹果公司(Apple)的Mac OS X Dashboard上被引入,而后被应用于Safari。基于Gecko1.8的浏览器,...
标签: Web开发
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 在HTML5中,video元素目前支持三种格式的视频文件, 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 3.Web...
标签: Web开发
HTML 5 canvas 基本语法简述 5 规范引进了很多新特性,其中最令人期待的之一就是 元素。HTML 5 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 提供图形绘制功能。 5 规...
标签: Web开发
1、标签不再区分大小写 代码如下: pHello,World!/P 2、元素可以省略结束标签 (1)空元素语法的元素:area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr (2)可以省略结束标签的元素:colgroup、dt、dd、li、optgroup、p、rt、rp、thread、tbody、tfoot、tr、td、th (3)可以全部省略...
标签: Web开发
HTML 元素可拥有事件属性,这些属性在浏览器中触发行为,比如当用户单击一个 HTML 元素时启动一段 JavaScript。下面列出的事件属性,可以把它们插入 HTML 标签来定义事件行为。 HTML 4.01 与 HTML 5 之间的差异 HTML 5 中的新事件:onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondrags...

经验教程

148

收藏

43
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部