从今年开始很多网站的搜索按钮都逐渐改成了带有语音搜索的input文本框。从淘宝到各个小站,乃至于博客。网页上面右键查看源码,我们不难发现,其实它只是调用了Google的API而已。
我实验了几次,例如我在淘宝语音“ 诺基亚 Window Phone Lumia 900“,对于我这个南方口音,普通话不是绝对标准的人来说,能全部返回,并且能进行空格分词,从个人而言还是非常满意的。但是唯一的缺点是在网速不太给力的情况下,这个功能显然就成了摆设,不知道这个问题会有什么处理或者优化的办法。
x-webkit-speech是webkit内核浏览器的私有属性,因此目前也只能在Chrome 11和以上版本使用。应当是扑捉了语音后发送到Google的服务器进行识别和处理后,再返回结果。首先说一个题外话,Chrome的市场份额无疑是这两年上升最快的浏览器,没有之一。可以发现基本每个礼拜都会有Chrome的更新版本,它的用户体验、程序效率和最新的功能体验,也正是因为不断的更新迭代才能得到充分的体现。谁让它是开源浏览器呢。
言归正传。其实想添加这个语音搜索非常简单,只需要为input添加名为 x-webkit-speech 的属性就行了。
检测浏览器是否支持:
if (document.createElement("input").webkitSpeech === undefined) {
alert("Speech input is not supported in your browser.");
}
例,直接使用:
<input type="search" x-webkit-speech/>
设置语言的类型:
<input type="search" x-webkit-speech lang="zh-CN" />
监听输入:
若要监听输入变化以便做其他处理,使用onwebkitspeechchange属性添加处理函数。
<input type="search" x-webkit-speech onwebkitspeechchange="fun()" />
去字符:
语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如“的”,“啦”, "啊" 等等。
<input type="search" class="text" x-webkit-speech x-webkit-grammar="bUIltin:search" />
分享到:
相关推荐
这里介绍的是大家以后要...input type=”text” x-webkit-speech=”x-webkit-speech” /> 语音识别在十年前是让人觉得不可思议的事情,即便是前些年,网页上的语音识别也只能使用其他方式实现,比如使用Flashplay
细心的朋友可能会观察到谷歌搜索右侧有个语音搜索功能,能够实现语音识别功能,可能功能还不够完善,不过也算是一种趋势...3.x-webkit-grammar:指的是语音输入语法,"builtin:search”值使得语音输入的内容尽量靠近搜索
Speechifier 是一个简单、静音的 Chrome 扩展程序,它使每个文本框都成为语音输入框。 使用此扩展程序,您可以与浏览器对话并输入您在页面上说的话。 它通过将“x-webkit-speech”属性添加到页面上的合格 HTML 元素...
Html5支持语音搜索,可惜的是...语音输入其他属性: lang 就是语言种类 可以控制输入框里面的语音的语言种类,例如 <input type="text" x-webkit-speech lang="zh-CN"/> 目前已知的只有onwebkitspeechchange,顾
另外,x-webkit-speech 属性可以实现语音输入功能。 代码如下: <div><input type=”email” name=”email” spellcheck=”false” placeholder=”邮 箱” autofocus tabindex=”1″ x-webkit-speech></div> ...
可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-... 语音输入其他属性: lang这玩意可以强制输入框里面的语音的语言种类,例如 <input type=text x-webkit-speech lang=zh-C
placeholder 默认提示字符 autofocus 当页面加载时,会获得焦点的一个按钮 x-webkit-speech 语音搜索,webkit内核才支持 accept 规定可上传的文件类型(仅适用type=file) alt 规定图片输入控件代替文本 ...
x-webkit-speech 一看到这句代码,想到了什么?对,这说明语音搜索只支持webkit内核浏览器,那么这段代码具体要放在哪呢? 复制代码代码如下:<input type="text" class="text" name="value_2" id="value_2" x-...
controller.js处理按钮输入并在speechRecognition.js开始识别 用法 在服务器上运行它,例如使用python: $ python3 -m http.server Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ... 使用Webkit...
Google曾在自己的官方博客中宣布在Beta版Chrome25 中将加入网络语音API(Web SpeechAPI),让用户在某些嵌入了JavaScript的网页中可以更方便地使用语音指令、听写等功能。同时新版本在内容安全策略标头(Content ...