HTML5 语音搜索只需一句代码

致唔逝去的青春

致唔逝去的青春

2016-02-19 12:16

下面图老师小编跟大家分享HTML5 语音搜索只需一句代码,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

淘宝网的语音搜索也有了一阵子了,但似乎都没看到相关的博客或帖子在说这个如何实现,今天查了点资料,发现原来实现是如此简单,可能是因为太简单了,也就没有人讨论了吧。

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

其实实现只需一句代码即可:

x-webkit-speech

一看到这句代码,想到了什么?对,这说明语音搜索只支持webkit内核浏览器,那么这段代码具体要放在哪呢?


代码如下:

input type="text" class="text" name="value_2" id="value_2" x-webkit-speech

放在文本输入框内就行了,其他的什么都不用做,看

当然还有一些其他的参数,比如设置语音限制语言种类

代码如下:

input type="text" class="text" name="value_2" id="value_2" x-webkit-speech lang="zh-CN"

还有设置语音输入语法的参数,这个就比较试用于搜索框。加上这参数后,系统就会自动去掉的、啦这类无意义的字

代码如下:

input type="text" class="text" name="value_2" id="value_2" x-webkit-speech x-webkit-grammar="bUIltin:search"

当然在测试时候发现一个小问题,就是当具有语音搜索的页面是iframe页面时,点击麦克风后,请开始说话这浮动层就不跟随input输入框了

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

展开更多 50%)
分享

猜你喜欢

HTML5 语音搜索只需一句代码

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

html5的新玩法——语音搜索

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

s8lol主宰符文怎么配

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

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

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

html5弹跳球示例代码

Web开发
html5弹跳球示例代码

lol偷钱流符文搭配推荐

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

JSP一句话木马代码

Web开发
JSP一句话木马代码

HTML5的标签的代码的简单介绍 HTML5标签的简介

Web开发
HTML5的标签的代码的简单介绍 HTML5标签的简介

lolAD刺客新符文搭配推荐

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

在Java中使用Draw2D和SWT绘图

在Java中使用Draw2D和SWT绘图

使用html5+css3来实现slider切换效果告别javascript+css

使用html5+css3来实现slider切换效果告别javascript+css
下拉加载更多内容 ↓