谷歌的网站是时逛时新啊,今天在他们首页发现了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尽快统一并应用了。

HTML5语音输入方法的更多相关文章

  1. HTML5——语音输入

    一.使用方式: <input type="text" x-webkit-speech /> 二.属性 1.lang属性:语言种类 <input type=&quo ...

  2. 【转】HTML5的语音输入 渐进使用HTML5语言识别, so easy!

    转自: 本文地址:http://www.zhangxinxu.com/wordpress/?p=2408 一.本不想写此文 HTML5语音识别(现在一般用在搜索上),目前相关介绍还是挺多的.为何呢?因 ...

  3. HTML5微信jssdk录音播放语音的方法

    HTML5微信jssdk录音播放语音的方法需要注意的2个问题1 就是一定要判断1秒内 录音都不算 ps:太短不能录音 2 录音超过1分钟 会发现正在录音突然消失 所以要写wx.onVoiceRecor ...

  4. HTML5中x-webkit-speech语音输入功能

    如今各大站点都在搜索框中增加了语音输入功能,只是眼下仅仅有Chrome 11及以上版本号才支持. 能够用chrome浏览器在这里试试效果,点击话筒就可以: 实现起来也很easy,为input加入名为 ...

  5. ios语音输入崩溃

    游戏中任何可以输入的地方,只要调用语音输入,必然会导致app崩溃,解决方法如下: ok, so essentially the gist of it is that siri wants gl con ...

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

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

  7. 关于HTML5 语音搜索的问题

    以前语音输入功能虽然没用过,但是看上去很高级的样子,有了智能手机之后,在ios和android中的语音输入,特别是iPhone的Siri,让一切变得如此简单,嘎嘎. 当然我不是在这里要实现如此强悍的功 ...

  8. android上使用蓝牙设备进行语音输入

    主要实现步骤如下:1.确保已经和蓝牙耳机配对连接上.2.开启蓝牙信道AudioManager mAudioManager = (AudioManager)getSystemService(Contex ...

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

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

随机推荐

  1. date命令以及date -d使用

    date -d '2 days ago' //显示2天前的时间,2019年 02月 10日 星期日 08:53:28 CST date -d "2 days ago" +%Y%m% ...

  2. 如何在 Linux 中查看进程占用的端口号【转】

    对于 Linux 系统管理员来说,清楚某个服务是否正确地绑定或监听某个端口,是至关重要的.如果你需要处理端口相关的问题,这篇文章可能会对你有用. 端口是 Linux 系统上特定进程之间逻辑连接的标识, ...

  3. vue中更换.ico图标报错路径找不到图片

    问题描述: vue项目中,想要更换.ico图片,更换完成后刷新页面报错,找不到路径. 解决: 更换完图片,重新启动下vue项目(npm run dev)就可以啦~ 哈哈哈 补充知识: 网页title旁 ...

  4. 安装python2、python3

    先安装python2: python安装 D:\Python27 目录下的 "python.exe" 重命名为 "python2.exe",则在cmd中输入 p ...

  5. 13)django-ORM(连表一对多,外键创建,创建数据,3种查询)

    一对多需要使用外键 一:外键创建ForeignKey b=models.ForeignKey(to="Business",to_field=("id"))#dj ...

  6. webStorm 快捷键 + 浏览器

    webStorm 快捷键 shift + enter  不管光标在哪个位置 新建一行 Ctrl + G          查找行Ctrl + B          查找函数Ctrl + D      ...

  7. Confluence 6 注册单一小工具

    如果你不能订阅一个应用的小工具,你需要将小工具一个一个的添加进来.针对网站不支持小工具订阅和你的应用和你的 Confluence 不能建立信任连接的情况,你就只能这样添加了. 首先你需要获得小工具的 ...

  8. Zookeeper的Watcher 机制的实现原理

    基于 Java API 初探 zookeeper 的使用: 先来简单看一下API的使用: public class ConnectionDemo { public static void main(S ...

  9. python网络爬虫笔记(八)

    一.pthon 序列化json格式 1.将python内置对象转换成json 模块,dumps()方法返回的是一个str,内容是标准的JSON,dump()方法可以直接吧JSON写入一个file-li ...

  10. Winhex数据恢复学习笔记(三)

    上次对文件系统进行简单的分析,这次就文件的镜像功能做一介绍 1.首先镜像的概念:镜像就是数据的副本,是原来数据在相同位置上以相同的排列模式生成的拷贝,所以镜像可以用来还原原始数据,代替原始数据工作,镜 ...