基于Html5实现的语音搜索功能


Posted in HTML / CSS onMay 13, 2019

细心的朋友可能会观察到谷歌搜索右侧有个语音搜索功能,能够实现语音识别功能,可能功能还不够完善,不过也算是一种趋势,下面就介绍一下如何实现此功能,代码如下:

<input type="text" name="test" x-webkit-speech lang="zh-CN" x-webkit-grammar="bUIltin:search"/>

参数解释:

1.x-webkit-speech:可以让文本框右侧出现话筒图标。

2.lang:强制输入框里面的语音的语言种类。

3.x-webkit-grammar:指的是语音输入语法,"builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符。

总结

以上所述是小编给大家介绍的基于Html5实现的语音搜索功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
Mar 02 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
HTML5基础学习之文本标签控制
Mar 25 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 #HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 #HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 #HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 #HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 #HTML / CSS
可能这些是你想要的H5软键盘兼容方案(小结)
Apr 23 #HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 #HTML / CSS
You might like
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
python将人民币转换大写的脚本代码
2013/02/10 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Python:slice与indices的用法
2019/11/25 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python使用windows设置定时执行脚本
2020/11/12 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
药学职务聘任书
2014/03/29 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
2014年加油站工作总结
2014/12/04 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
会计试用期自我评价
2015/03/10 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android