基于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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
css3与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
CSS3绘制超炫的上下起伏波动进度加载动画
Apr 21 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
关于html字符串正则判断和匹配的具体使用
Dec 12 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
Feb 06 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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数学运算
2011/12/30 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
php中namespace use用法实例分析
2016/01/22 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
PHP单链表的实现代码
2016/07/05 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
禁止空格提交表单的js代码
2013/11/17 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python 多线程抓取图片效率对比
2016/02/27 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
python 实现简单的FTP程序
2019/12/27 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
python 递归相关知识总结
2021/03/03 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
什么是事务?为什么需要事务?
2012/01/09 面试题
编程实现去掉XML的重复结点
2014/05/28 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
校运会入场式解说词
2014/02/10 职场文书
自荐书范文范例
2014/02/13 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2015安全保卫工作总结
2015/04/25 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏