HTML5语音识别（已被抛弃）

<input type="text" x-webkit-speech id="d1" lang="zh-CN" x-webkit-grammar="bUIltin:search" 
onwebkitspeechchange="foo()" />
<-- js部分 -->
function foo() {
    var n = document.getElementById("d1").value;
    if ( n === "百度") {
        window.location.href = "http://www.baidu.com";
    } else {
        window.location.href = "https://www.qtshe.com";
    }
}

说明：

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

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

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

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

• x-webkit-grammar ：语音输入语法

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

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

• 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(){
             //函数体，如下：
             toast('https://www.qtshe.com');
       }
   </script>
  

效果图：

image.png

青团社招聘：

招聘岗位：高级前端开发工程师P5及以上
坐标杭州市余杭区文一西路1380号金之源大厦11层

简历投递到：hr@qtshe.com || haochen@qtshe.com

职位描述：

1、建设工具、提炼组件、抽象框架，促进前端工程化、服务化，持续提升研发效率，保障线上产品质量

2、构建H5/PC应用基础设施，主导建设前端各种发布/监控等平台，指导落实解决方案

3、持续优化前端页面性能，维护前端代码规范，钻研各种前沿技术和创新交互，增强用户体验、开拓前端能力边界