html5的新玩法——语音搜索

如果你想飞

如果你想飞

2016-02-19 12:17

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的html5的新玩法——语音搜索,手机电脑控们准备好了吗?一起看过来吧!
谷歌的网站是时逛时新啊,今天在他们首页发现了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 语音搜索只需一句代码
展开更多 50%)
分享

猜你喜欢

html5的新玩法——语音搜索

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

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

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

s8lol主宰符文怎么配

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

HTML5 语音搜索只需一句代码

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

Html5新标签解释及用法

Web开发
Html5新标签解释及用法

lol偷钱流符文搭配推荐

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

html5 标签

Web开发
html5 标签

HTML5引入的新数组TypedArray介绍

Web开发
HTML5引入的新数组TypedArray介绍

lolAD刺客新符文搭配推荐

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

我说只要你给的戒 - QQ情侣分组

我说只要你给的戒 - QQ情侣分组

html5 Canvas画图教程(1)—画图的基本常识

html5 Canvas画图教程(1)—画图的基本常识
下拉加载更多内容 ↓