HTML5 语音搜索(淘宝店语音搜素)

2016-02-19 12:16 9 1 收藏

今天图老师小编给大家展示的是HTML5 语音搜索(淘宝店语音搜素),精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!

【 tulaoshi.com - Web开发 】

Html5支持语音搜索,可惜的是只有webkit核心的浏览器才能使用。用法很简单  只需要在input添加属性x-webkit-speech即可,例子如下:   input type="text" x-webkit-speech /

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

这时说出来识别后就可以了,如淘宝店语音搜素:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

语音输入其他属性:   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" /   x-webkit-grammar:

使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如「的」。

下面做一个小例子测试一下

代码如下:

html
body
inputtype="text"accesskey="s" autofocus="true" autocomplete="off"name="value_2"id="value_2"x-webkit-speech lang="zh-CN" x-webkit-grammar="bUIltin:search"
button type="submit"搜 索/button
/body
/html

效果如下:

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

延伸阅读
标签: Web开发
HTML5之前,要实现网页元素的拖放操作,需要依靠mousedown、mousemove、mouseup等API,通过大量的JS代码来实现;HTML5中引入了直接支持拖放操作的API,大大简化了网页元素的拖放操作编程难度,并且这些API除了支持浏览器内部元素的拖放外,同时支持浏览器和其它应用程序之间的数据互相拖动。 本文通过一个简单示例,演示HTML5中拖放API的使用...
标签: Web开发
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。 在HTML5中,video元素目前支持三种格式的视频文件, 1.Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 2.MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 3.Web...
360浏览器语音搜索怎么用   1)打开360浏览器,点击右上角的。   2)然后按住麦克风说话,比如小编说的,说完后360浏览器自动识别并搜索相关内容。           注 :更多精彩教程请关注图老师手机教程栏目,图老师手机数码群:296605639欢迎你的加入
百变语音怎么保存语音   百变语音保存语音教程。想捉弄一下好友?想把变声后的语音发给好友?小伙伴们可以先保存语音,然后再发送给好友哦,那么怎么保存语音呢?现在图老师小编就教大家百变语音怎么保存语音。 1)点击打开,点击下方的;(如下图) 2)点击长按要刹车的语音,接着点击下方的;(如下图) 3)点...
标签: Web开发
HTML 5 canvas 基本语法简述 5 规范引进了很多新特性,其中最令人期待的之一就是 元素。HTML 5 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强大。每一个 元素都有一个"上下文( context )" (想象成绘图板上的一页),在其中可以绘制任意图形。浏览器支持多个 canvas 上下文,并通过不同的 提供图形绘制功能。 5 规...

经验教程

17

收藏

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

如果您有什么好的建议或者疑问,可以联系我们。 商务合作QQ:3272218541;3282258740。商务合作微信:13319608704;13319603564。

加好友请备注机构名称。让我们一起学习、一起进步tulaoshi.com 版权所有 © 2019 All Rights Reserved. 湘ICP备19009391号-3

微信公众号