HTML5 语音搜索(淘宝店语音搜素)


Posted in HTML / CSS onJanuary 03, 2013
Html5支持语音搜索,可惜的是只有webkit核心的浏览器才能使用。用法很简单  只需要在input添加属性x-webkit-speech即可,例子如下:   <input type="text" x-webkit-speech />

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

这时说出来识别后就可以了,如淘宝店语音搜素:

HTML5 语音搜索(淘宝店语音搜素)

语音输入其他属性:   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" />   x-webkit-grammar:

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

下面做一个小例子测试一下
复制代码
代码如下:

<html>
<body>
<inputtype="text"accesskey="s" autofocus="true" autocomplete="off"name="value_2"id="value_2"x-webkit-speech lang="zh-CN" x-webkit-grammar="bUIltin:search">
<button type="submit">搜 索</button>
</body>
</html>

效果如下:
HTML5 语音搜索(淘宝店语音搜素)
HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
html5理解head_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 #HTML / CSS
使用CSS实现弹性视频html5案例实践
Dec 26 #HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 #HTML / CSS
html5 application cache遇到的严重问题
Dec 26 #HTML / CSS
html5 web本地存储将取代我们的cookie
Dec 26 #HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 #HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 #HTML / CSS
You might like
一个比较不错的PHP日历类分享
2014/11/18 PHP
PHP的引用详解
2015/02/22 PHP
PHP实现简易计算器功能
2020/08/28 PHP
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
动态加载js、css的简单实现代码
2016/05/26 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue实现分页栏效果
2019/06/28 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
2019/09/20 Javascript
python操作xml文件详细介绍
2014/06/09 Python
python编写的最短路径算法
2015/03/25 Python
Python Django中间件,中间件函数,全局异常处理操作示例
2019/11/08 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
瀑布模型都有哪些优缺点
2014/06/23 面试题
公关关系专员的自我评价分享
2013/11/20 职场文书
培训主管的岗位职责
2013/11/23 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
反腐倡廉标语
2014/06/24 职场文书
我的生日感言
2015/08/03 职场文书
2015年教师节广播稿
2015/08/19 职场文书
《包身工》教学反思
2016/02/23 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis