当前位置:96看吧 > 技术文档 > 网页制作 > 网站如何实现语音输入搜索功能

网站如何实现语音输入搜索功能

时间:2013/04/19
作者:mawendong
来源:96看吧
查看:
标签:html5语音输入input

语音输入功能看上去很高级的样子,html5中的语音输入功能speech属性,大家先可以看看

W3C文档:http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html

大部分的浏览器还没有实现这些接口,目前可以用的只有chrome(11版本以上)的私有属性:x-webkit-speech。

我们看看淘宝在chrome下的搜索框,如图:

实现语音输入也非常简单:

<input id="q" name="q" accesskey="s" autofocus="true" autocomplete="off" x-webkit-speech  x-webkit-grammar="builtin:translate" />

简单的来说,我们只要在input元素上加上x-webkit-speech属性就可以了,当然你如果用xhtml,那么标准的写法是:x-webkit-speech=”x-webkit-speech”;

<input  name="q"  x-webkit-speech />

其他属性:lang

设置语言种类:

<input lang="zh-CN" type="text" />

x-webkit-grammar

语音识别语法,取值:

translations—说一个词,并把它翻译

definitions—说一个词,并且获得定音

directions—说一个地址,要求行车路线

dictation

事件

onwebkitspeechchange

语音输入事件,当发声语音改变时触发:

<form action="http://www.96kb.com/search.asp" >
 <input type="search" name="wd" lang="zh-CN" x-webkit-speech x-webkit-grammar="builtin:search" onwebkitspeechchange="startSearch(event)">
</form> 

上一篇:Flash图表Amcharts
下一篇:em是何物?em对比px
演示地址
Demo
页面举报
Report
关闭页面
Close
收藏页面
Favorites
分享页面
Share
版权信息:栏目内,站内会员所分享的全部“资源/素材/文章”,仅供学习与参考,版权为原作者所有。
下载提示:非注册用户每天可下载一个文件,已注册会员不受限制。
网友评论
数据载入中
验证码
  • 请您注意:
  • ·请不要在评论中含与内容无关的广告链接。
  • ·不良评论请用报告管理员,以利管理员及时删除。
  • ·遵守中华人民共和国的各项有关法律法规
  • ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • ·本站管理人员有权保留或删除评论中的任意内容
  • ·您在本站发表的作品,本站有权在网站内转载或引用
  • ·参与本评论即表明您已经阅读并接受上述条款
相关最新
相关热门