基于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实现跳动的动画效果
Sep 12 HTML / CSS
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
探讨HTML5移动开发的几大特性(必看)
Dec 30 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
HTML5拖拽功能实现的拼图游戏
Jul 31 HTML / CSS
CSS3实现指纹特效代码
Mar 17 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
cakephp打印sql语句的方法
2015/02/13 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
详解微信小程序自定义组件的实现及数据交互
2019/07/22 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python中return self的用法详解
2018/07/27 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
python3中编码获取网页的实例方法
2020/11/16 Python
计算机学生的自我评价分享
2014/02/18 职场文书
工作过失检讨书
2014/02/23 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
小学班主任事迹材料
2014/12/17 职场文书
旷工检讨书1000字
2015/01/01 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技