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

江山如画 • 2022年3月19日上午9:04 • 网页制作 • 阅读 7236

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

先上图：

普通文本框代码：

<input />

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

<input x-webkit-speech />

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

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

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

<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