基于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让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
CSS书写规范、顺序和命名规则
Mar 06 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
CSS3中Animation实现简单的手指点击动画的示例
Jul 15 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将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
javascript计算渐变颜色的实例
2017/09/22 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
python判断计算机是否有网络连接的实例
2018/12/15 Python
python实现抽奖小程序
2020/04/15 Python
python3的print()函数的用法图文讲解
2019/07/16 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
Django视图扩展类知识点详解
2019/10/25 Python
Python模块的制作方法实例分析
2019/12/21 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
ORACLE十问
2015/04/20 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
医学生求职信
2014/07/01 职场文书
擅自离岗检讨书
2014/09/12 职场文书
团员个人年度总结
2015/02/26 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis