如今各大站点都在搜索框中增加了语音输入功能,只是眼下仅仅有Chrome 11及以上版本号才支持。

能够用chrome浏览器在这里试试效果,点击话筒就可以:

实现起来也很easy,为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="foo()" />

x-webkit-grammar

语音输入语法,”builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符。比如「的」

<input type="text" x-webkit-speech x-webkit-grammar="builtin:search" />

还有个值:”builtin:translate”看到taobao在用,但眼下还不清楚是什么意义,有时间再细致看看W3C的文档。

測试了下效果。语音识别率还不错,但中英夹杂的时候就非常悲剧了,并且该服务须要走google的server所以有时响应速度非常慢,另外在mac中遇到提示“麦克风无法使用”的情况。推測可能存在一些硬件兼容性问题。总的来说是趣味性大于有用性;比較期待能在手机浏览器上实现这个功能,能够做一些比較有趣的应用。

HTML5中x-webkit-speech语音输入功能的更多相关文章

  1. AngularJS进阶(十八)在AngularJS应用中集成科大讯飞语音输入功能

    在AngularJS应用中集成科大讯飞语音输入功能 注:请点击此处进行充电! 前言 根据项目需求,需要在首页搜索框中添加语音输入功能,考虑到科大讯飞语音业务的强大能力,遂决定使用科大讯飞语音输入第三方 ...

  2. HTML5为输入框添加语音输入功能

    这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法. 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了. 其实很简单,语音识别是ht ...

  3. toggleClass() 方法做类似于微信扣扣点击语音图标按钮变成切换到语音输入功能,点击键盘图标按钮切换到文字输入状态的效果

    就是这种效果的类似. <html><head><script type="text/javascript" src="/jquery/jqu ...

  4. HoloLens开发手记 - Unity之语音输入

    对于HoloLens,语音输入是三大基本输入方式之一,广泛地运用在各种交互中.HoloLens上语音输入有三种形式,分别是: 语音命令 Voice Command 听写 Diction 语法识别 Gr ...

  5. AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能

    在AngularJS应用中集成百度地图实现定位功能 注:请点击此处进行充电! 前言 根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...

  6. HTML5语音输入方法

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

  7. 详解HTML5中rel属性的prefetch预加载功能使用

    在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...

  8. 【javascript】html5中使用canvas编写头像上传截取功能

    [javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...

  9. MUI - 为textarea添加语音输入和清除的功能

    为textarea添加语音输入和清除的功能 mui支持input输入框语音输入和清除的功能,只需要添加相关css类即可. http://www.cnblogs.com/phillyx/ 代码如下 &l ...

随机推荐

  1. Ural 1152 False Mirrors(状压DP)

    题目地址:space=1&num=1152">Ural 1152 初学状压DP,原来状压仅仅是用到了个位运算.. 非常水的状压DP.注意四则运算的优先级是高于位运算的..也就是 ...

  2. cmd 进入mysql 小技巧

    1.開始中找出执行:输入cmd 2.查找appserv所在盘,我的在D盘.所以接着输入:d: 3.在d盘中查找mysql所在文件夹:cd appserv\mysql\bin 4.再输入主机名.数据库名 ...

  3. 网页爬虫框架jsoup介绍

    序言:在不知道jsoup框架前,因为项目需求.须要定时抓取其它站点上的内容.便想到用HttpClient方式获取指定站点的内容.这样的方法比較笨,就是通过url请求指定站点.依据指定站点返回文本解析. ...

  4. 百度编辑器图片在线流量返回url改动

    百度编辑器中返回的是我们server中的url,有时并非我们须要的,比方图文编辑中.我想在线浏览上传过的图片 ,那么我返回的应该是腾讯server上面的url.这样才不会被腾讯的过滤器过来掉,全部我们 ...

  5. CaffeNet用于Flickr Style数据集上的风格识别

    转自 http://blog.csdn.net/liumaolincycle/article/details/48501423 微调是基于已经学习好的模型的,通过修改结构,从已学习好的模型权重中继续训 ...

  6. CLR - 基础

    前言 好记性不如烂“笔头”系列... 目录 托管模块 JIT(just-in-time) 元数据 CLR 解析类型引用 托管模块 面向 CLR 的编译器在编译源文件时最终会编译成一个 PE(可移植执行 ...

  7. Mysql command not found on mac pro

    export PATH=${PATH}:/usr/local/mysql/bin If you want this to be run every time you open terminal put ...

  8. 用IIS怎样在局域网内建网站

    IIS服务器组建一览 IIS(Internet Information Server,互联网信息服务)是一种Web(网页)服务组件,其中包括Web服务器.FTP服务器.NNTP服务器和SMTP服务器, ...

  9. Pyhton学习——Day61

    class Pagination(object): def __init__(self,totalCount,currentPage,perPageItemNum=10,maxPageNum=7): ...

  10. luoguP1002

    p1002 题意: 从坐标A到坐标B的可能路线(有一些点不能走)情况,很明显可以看出用dp做 m[i][j]=m[i-1][j]+m[i][j-1](注意处理不能走的点) 自己在初始化时犯了错,第1行 ...