HTML5 语音搜索只需一句代码


Posted in HTML / CSS onJanuary 03, 2013

HTML5 语音搜索只需一句代码

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

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

x-webkit-speech

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

复制代码代码如下:


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

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

HTML5 语音搜索只需一句代码

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

复制代码
代码如下:

<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输入框了

HTML5 语音搜索只需一句代码

相关阅读:HTML5 语音搜索(淘宝店语音搜素)

HTML / CSS 相关文章推荐
CSS3中的注音对齐属性ruby-align用法指南
Jul 01 HTML / CSS
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
CSS3——齿轮转动关键代码
May 02 HTML / CSS
HTML5实现Notification API桌面通知功能
Mar 02 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
Jan 03 #HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 #HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 #HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 #HTML / CSS
html5 application cache遇到的严重问题
Dec 26 #HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 #HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 #HTML / CSS
You might like
供参考的 php 学习提高路线分享
2011/10/23 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
JQuery球队选择实例
2015/05/18 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
Ionic快速安装教程
2016/06/03 Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
2018/01/18 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
python实现图片筛选程序
2018/10/24 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
Python程序控制语句用法实例分析
2020/01/14 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
为什么需要版本控制
2016/10/28 面试题
正规的求职信范文分享
2013/12/11 职场文书
学习型班组申报材料
2014/05/31 职场文书
党的生日活动方案
2014/08/15 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2014年医院工作总结
2014/11/20 职场文书
展览会邀请函
2015/02/02 职场文书
现实表现证明材料
2015/06/19 职场文书
Redis监控工具RedisInsight安装与使用
2022/03/21 Redis