基于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制作日历实现代码
Jan 21 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
Nov 30 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
html5-canvas中使用clip抠出一个区域的示例代码
May 25 HTML / CSS
使用HTML5技术开发一个属于自己的超酷颜色选择器
Sep 22 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
Jan 04 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
Feb 18 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 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+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
图片之间的切换
2006/06/26 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
JavaScript实现图片DIV竖向滑动的方法
2015/04/25 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
轻松掌握python设计模式之访问者模式
2016/11/18 Python
Python实现破解猜数游戏算法示例
2017/09/25 Python
使用C++扩展Python的功能详解
2018/01/12 Python
python中的随机函数random的用法示例
2018/01/27 Python
Python异常的检测和处理方法
2018/10/26 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
Python解析微信dat文件的方法
2020/11/30 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
微信营销策划方案
2014/02/24 职场文书
经贸专业毕业生求职信范文
2014/05/01 职场文书
安全生产大检查方案
2014/05/07 职场文书
春节联欢会策划方案
2014/05/16 职场文书
英文演讲稿开场白
2014/08/25 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
2015年领班工作总结
2015/04/29 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书