HTML5之语音识别实例

HTML5之语音识别实例

代码

<input type="text"  x-webkit-speech id="d1" lang="zh-CN" x-webkit-grammar="bUIltin:search" onwebkitspeechchange="foo()"/>

 

<script>

function foo(){

var n = document.getElementById("d1").value;

if(n == "百度"){

    window.location.href = "http://www.baidu.com";

}else{

window.location.href = "http://www.ahsdxy.ah.edu.cn/";

}

}

</script>

 

说明：

1）x-webkit-speech：语音识别支持属性

    <input type="text" x-webkit-speech/>

2）lang：设置语言种类，比如汉语:lang="ch-CN"

    <input type="text" x-webkit-speech lang="ch-CN"/>

3） x-webkit-grammar ：语音输入语法

    比如: x-webkit-grammar="bUIltin:search"使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如“的、啦”等

    <input type="text" x-webkit-speech lang="ch-CN"  x-webkit-grammar="bUIltin:search"/>

4） onwebkitspeechchange ：语音输入事件，当语音改变时触发

      比如：onwebkitspeechchange="foo()" ，当停止语音时，会触发js中的foo()函数

    <input type="text" x-webkit-speech lang="ch-CN"  x-webkit-grammar="bUIltin:search"                      

      onwebkitspeechchange="foo()"/>

      此时，需要写相应的JavaScript函数foo()

      <script>

          function foo(){

                //函数体，如下：

                alert(8);

          }

      </script>