语音搜索,装X神器啊

Author : lovecicy

最近看了张鑫旭的一篇关于语音搜索的文章,感觉使用蛮简单的,但是够高级,够装X,于是在自己的博客上试了试。

其实代码挺简单的,添加一个input,设置两个属性,html部分就搞定了:

<input id="speechService" type="text" x-webkit-grammer="builtin:search" x-webkit-speech lang="zh-CN">

接下来就是用JS来绑定事件监听器了:

var isWebkit = typeof document.webkitHidden !== "undefined"; 
if(isWebkit){ 
  var s = document.getElementById('speechService'); 
  s.style.display='inline'; 
  s.onwebkitspeechchange=function(e){ 
    var v = this.value; 
    if(v=="首页"){ 
      location.href="http://lovecicy.com"; 
    } 
  }; 
}

CSS方面,我将它放在返回顶部的上方,就显示一个话筒的图标,因此用到了一下CSS:

#speechService {
  position: fixed;
  right: 7px;
  bottom: 175px;
  width: 17px;
  background: transparent;
  border: none;
  display: none;
}

还有就是,这个功能只在webkit下才有用,因此目前只有chrome才能识别,所以最好将其默认设置为隐藏,判断是chrome以后才显示出来。

OK,搞定,一个简单的语音输入功能就完成了,点击话筒图标,说“首页”,就能跳回首页啦,更多功能,敬请期待。

standard

Have your say