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

浴缸批发兼零售

浴缸批发兼零售

2016-02-19 12:16

今天图老师小编给大家展示的是HTML5 语音搜索(淘宝店语音搜素),精心挑选的内容希望大家多多支持、多多分享,喜欢就赶紧get哦!
Html5支持语音搜索,可惜的是只有webkit核心的浏览器才能使用。用法很简单  只需要在input添加属性x-webkit-speech即可,例子如下:   input type="text" x-webkit-speech /

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

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

(本文来源于图老师网站,更多请访问http://m.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:

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)下面做一个小例子测试一下

代码如下:

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

效果如下:
展开更多 50%)
分享

猜你喜欢

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

Web开发
HTML5 语音搜索(淘宝店语音搜素)

html5的新玩法——语音搜索

Web开发
html5的新玩法——语音搜索

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML5 语音搜索只需一句代码

Web开发
HTML5 语音搜索只需一句代码

Chrome语音搜索解读

浏览器
Chrome语音搜索解读

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

谷歌语音搜索如何快速调用

手机软件 应用软件
谷歌语音搜索如何快速调用

html5 标签

Web开发
html5 标签

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

是否、可以再重來 - QQ情侣分组

是否、可以再重來 - QQ情侣分组

css3 transform 3d 使用css3创建动态3d立方体(html5实践)

css3 transform 3d 使用css3创建动态3d立方体(html5实践)
下拉加载更多内容 ↓