x-webkit-speech 输入框中添加“小话筒”

使用语音输入作用有:
1.提供除了键盘和鼠标的另一个输入方法,针对pc用户,当键盘不可用时也可以使用语音输入。
2.为手机用户提供更加方便的输入方法。

lang
这玩意可以强制输入框里面的语音的语言种类,例如<input type="text" x-webkit-speech lang="zh-CN"/>

1.支持的浏览器
x-webkit-speech是webkit内核浏览器的私有属性(废话)。但现在只能在google的chrome 11以上才能使用。实现过程大概是捕捉到语音后,数据发送到google的服务器进行语音识别,然后返回结果。所以没有足够强大大的研发能力和服务器资源,真没法支持这个服务。作为普通话不标准经常被别人吐槽的人,使用语音搜索还是能十分准确地返回关键词,我顿时感动得一塌糊涂。

2.支持的标签
输入标签有input和textarea,实际上目前只有input支持。

3.检测浏览器是否支持
1if (document.createElement("input").webkitSpeech === undefined) {
2 alert("Speech input is not supported in your browser.");
3}

4.直接使用
为input标签加上x-webkit-speech属性
1<input type="search" x-webkit-speech />
捕捉到语音输入后会直接将关键词填入到输入框里。

5.监听输入
若要监听输入变化以便做其他处理,使用onwebkitspeechchange属性添加处理函数。
1<input type="search" x-webkit-speech onwebkitspeechchange="onChange()"/>
1<script type="text/JavaScript">
2 function onChange() {
3 alert('changed');
4 }
5</script>

6.注意:
如果原input中value不为空,输入会直接添加在原有文字后面。既然用webkit就要用placeholder了,不要再使用value为作输入提示了。

转自:http://hi.baidu.com/etion/item/395750dc3a6c72e7b3f7778e

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,478评论 19 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,223评论 4 61
  • meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略And...
    Mycro阅读 3,641评论 0 2
  • 经历了太多的风雨,就会越来越懂得,放手,也许是为了你以后能走的更好。如果两个人处于同一个频道太久的话,彼此都会失...
    曲摇阅读 3,233评论 0 0
  • “你一定要利用上下文自己已经了解的所有字句,来推敲出自己不了解的那个字的意义”我就问问这不是废话,我自己都知道。作...
    爺凌丶贝勒阅读 3,294评论 0 0