[转载]HTML5语音输入(淘宝语音搜索)方法

简介:

谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单
只需要在input添加属性x-webkit-speech即可,例子如下:


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


这样你的输入框右边里就多了个「小话筒」,点击的时候就会提示

大图

这时说出来识别后就可以了,我测试下来,中文英语的识别率还挺高的。

语音输入其他属性:

  • lang

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

  • 语音事件

    目前已知的只有onwebkitspeechchange,顾名思义,就是语音发生变化时触发的事件,一般可以作为提交
    <input type="text" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/>
    这样说完以后就自动搜索了

  • x-webkit-grammar

    这个不是语音搜索用的属性,但是可以控制这个输入的语法,例如在做搜索框的话就可以用
    <input type="text" x-webkit-speech x-webkit-grammar="bUIltin:search" />


    使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如「的」

这个功能相当有趣,实用就不敢恭维了,主要是因为适用范围太小啊,所以只能希望HTML5尽快统一并应用了。

 

文章转载自:http://liumiao.me/html/wd/W3C/264.html

本文转自 酷小孩 博客园博客,原文链接:http://www.cnblogs.com/babycool/archive/2012/03/31/2427660.html  ,如需转载请自行联系原作者

相关文章
|
8月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
4月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
66 2
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
6月前
|
Web App开发 数据采集 移动开发
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
在Selenium中优化Chrome的HTML5视频捕获涉及更新Chrome和ChromeDriver、配置浏览器选项、使用代理IP、调整加载策略及确保安装了正确编解码器。例如,更新驱动程序,添加如`--autoplay-policy`和`--proxy-server`的命令行参数,使用代理以防止被封,设置页面加载策略为&#39;eager&#39;,并安装必要的编解码器来确保视频播放。代码示例展示了如何集成这些优化措施。
235 2
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
|
3月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
41 1
|
8月前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
4月前
|
存储 编解码 前端开发
HTML颜色的性能优化方法
在网页开发中,虽然颜色选择并非主要性能瓶颈,但合理的颜色优化仍可提升渲染效率与用户体验。本文介绍十种实用技巧,如使用CSS渐变代替图片、运用CSS变量存储颜色、合理选择颜色格式、减少页面颜色种类、按需加载样式表等,帮助改善网页性能。尽管单独来看颜色优化的影响有限,但综合应用这些技巧能够有效提升网页加载速度及整体体验。
|
4月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
30 2
|
4月前
|
XML 数据格式 Python
Python技巧:将HTML实体代码转换为文本的方法
在选择方法时,考虑到实际的应用场景和需求是很重要的。通常,使用标准库的 `html`模块就足以满足大多数基本需求。对于复杂的HTML文档处理,则可能需要 `BeautifulSoup`。而在特殊场合,或者为了最大限度的控制和定制化,可以考虑正则表达式。
160 12
|
4月前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中,通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构,并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧,帮助你更好地控制和优化表单功能。
|
3月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
44 0

热门文章

最新文章