基于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 相关文章推荐
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
CSS3 text-shadow实现文字阴影效果
Feb 24 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
Jun 13 HTML / CSS
CSS3实现自定义Checkbox特效实例代码
Apr 24 HTML / CSS
前端面试必备之html5的新特性
Sep 05 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
HTML5图片层叠的实现示例
Jul 07 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 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+AJAX实现无刷新注册(带用户名实时检测)
2006/12/02 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
laravel框架查询数据集转为数组的两种方法
2019/10/10 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
JS setCapture 区域外事件捕捉
2010/03/18 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
python匿名函数用法实例分析
2019/08/03 Python
pytorch获取模型某一层参数名及参数值方式
2019/12/30 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
英国钻石公司:British Diamond Company
2020/02/16 全球购物
美国探亲签证邀请信
2014/02/05 职场文书
实践单位评语
2014/04/26 职场文书
欢迎领导检查标语
2014/06/27 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
上班旷工检讨书
2015/08/15 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android