基于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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
Nov 25 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
Jan 09 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 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获取某个目录大小的代码
2008/09/10 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php使用Image Magick将PDF文件转换为JPG文件的方法
2015/04/01 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
JavaScript截屏功能的实现代码
2017/07/28 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
微信小程序websocket实现聊天功能
2020/03/30 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
Python中查看文件名和文件路径
2017/03/31 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python读写文件基础知识点
2019/06/10 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
2016年小学感恩节活动总结
2016/04/01 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技