Html5一句代码制作语音搜索框

HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框

谷歌的网站以及淘宝网搜索框加了语音搜索功能。虽然目前只有webkit内核浏览器支持,如Chrome 11+浏览器,但是相信随着html的普及,绝大多数浏览器会支持此功能。

先上图:

Html5一句代码制作语音搜索框

普通文本框代码:

<input />

支持HTML5语音API的语音识别文本框

<input x-webkit-speech />

Html5一句代码制作语音搜索框

看到没,文本框后面有个麦克风模样的东西

Html5一句代码制作语音搜索框

此时,对着音频输入设备(如耳麦)发出你那或妖娆,或醇厚,或磁性的嗓音,啊~~

Html5一句代码制作语音搜索框

Html5一句代码制作语音搜索框

当然还有一些其他的参数,比如设置语音限制语言种类

<input x-webkit-speech lang=”zh-CN” />

还有设置语音输入语法的参数,这个就比较试用于搜索框。加上这参数后,系统就会自动去掉“的”、“啦”这类无意义的字

<input x-webkit-speech x-webkit-grammar=”bUIltin:search” />

还有一个onwebkitspeechchange的方法,发生在语言识别成功,且文字输入到文本框后触发。

<input x-webkit-speech x-webkit-grammar=”bUIltin:search” />

我觉得所有网站所有的类似搜索的输入框都让他支持HTML5语言识别!

HTML5+CSS3打造可自动获得焦点和支持语音输入的超酷搜索框:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>请使用支持HTML5的chrome浏览器体验语音搜索效果。|www.125jz.com</title>
  <style type="text/css">
   .search_form {
    position: relative;
    height: 31px;
    margin: 60px;
    display: inline-block;
   }

   .search_form:hover {
    -webkit-box-shadow: 0 0 3px #999;
    -moz-box-shadow: 0 0 3px #999
   }

   .sinput {
    float: left;
    width: 200px;
    height: 21px;
    line-height: 21px;
    padding: 4px 7px;
    color: b3b3b3;
    border: 1px solid #999;
    border-radius: 2px 0 0 2px;
    background-color: #fbfbfb;
   }

   .sbtn {
    float: left;
    width: 50px;
    height: 31px;
    padding: 0 12px;
    margin-left: -1px;
    border-radius: 0 2px 2px 0;
    border: 1px solid #4d90fe;
    background-color: #4d90fe;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    vertical-align: middle;
    color: #f3f7fc;
    position: absolute;
   }

   .sbtn:hover {
    background: #4084f2
   }
  </style>
 </head>
 <body>
  <form action="#" method="get" class="search_form">     <input type="text" name="s" class="sinput"
    placeholder="输入 回车搜索" autofocus x-webkit-speech>      <input type="submit" value="搜索" class="sbtn">
  </form>
 </body>
</html>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/10280.html

(0)
江山如画的头像江山如画管理团队
上一篇 2022年3月17日 上午10:43
下一篇 2022年3月19日 上午10:32

99%的人还看了以下文章

  • 第2课:HTML是什么?

    HTML是什么? HTML是一门语言,它令我们可以在因特网上展示信息。你所看到的网页,是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码,只需在浏览器菜单栏上点击“查看”,然后选择“源文件”即可。 对于生手来说,HTML代码看似很复杂,不过本教程将帮助你弄清楚它们的含义。 HTML能用来做什么? 如果你要制作网站的话,学习HTML是不可避免的。即…

    2018年1月20日
    5.2K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    3.1K0
  • 一句代码给图片加倒影-CSS3

    本文使用纯CSS代码给图片加倒影,CSS代码 : img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示: 完整代码: &lt…

    2019年8月18日
    3.3K0
  • js实现进度拖拽的效果-调节音量

    用js实现的一个进度拖拽效果,常用于调节音量。 该程序代码简单易懂,单页面可多次调用,效果如下图: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js实现进度拖拽的|www.125jz.com效果</…

    2019年2月15日
    4.5K0
  • 0基础学CSS

    本CSS教程能够让你在数小时内入门CSS,要求你有基本的HTML经验。

    2020年2月22日
    3.3K0
  • 如何给网页中的表格table添加滚动条

    最近在写一个项目的时候输出的结果有点多table的宽度直接把页面撑变形了,就想到了给table加滚动条,接下来125建站网为大家介绍HTML给table添加滚动条的方法,有需要的小伙伴可以参考一下: 1、方法分析: 要给table添加滚动条其实很简单,我们首先把table放到一个div里面,然后再设置div显示滚动条即可。 2、html代码: <div…

    2023年3月9日
    1.6K0

发表回复

登录后才能评论