作为一个专业的淘宝控，不知道从什么时候开始发现淘宝上居然还有语音搜索，好吧，因为好奇心作祟还是想一探究竟。不过我想仔细一点的人，都会发现在只有在webkit内核的浏览器上有，原因是它只支持webkit内核浏览器。我们先看下他们的不同显示

下面是在火狐下的截图

　　

　　下面这个是在chrome下的截图

　　

　　能猜想到的，就是写的代码肯定是不兼容的。不过你会发现真是比较简单的，就算你是前端初学者你也会明白

　　

<input type="text"  class="text"  name="test" id="test"  x-webkit-speech  lang="zh-CN"  x-webkit-grammar="bUIltin:search">

　　其中参数的意义：属性x-webkit-speech就是让你的输入框的右边出现一个小话筒，有了语音的功能。而lang，则是强制输入框里面的语音的语言种类，例如上面写的lang="zh-CN"指的是简体中文。x-webkit-grammar指的是语音输入语法，"builtin:search”值使得语音输入的内容尽量靠近搜索内容，去除多余的字符。

 不过这个硬件方面的兼容性还是有待提高，因为当你中英夹杂语音的时候，估计是会状况百出的。

　　在线演示

　　

淘宝语音搜索的实现——html5的更多相关文章

  1. 淘宝主搜索离线集群完成Hadoop 2

    淘宝搜索离线dump集群(hadoop&hbase)2013进行了几次重大升级,本文中将这些升级的详细过程.升级中所遇到的问题以及这些问题的解决方案分享给大家.至此,淘宝主搜索离线集群完全进入 ...

  2. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  3. 关于django 京东淘宝 混合搜索实现原理

    混合搜索在各大网站如京东.淘宝都有应用,他们的原理都是什么呢?本博文将为你介绍它们的实现过程. 混合搜索的原理,用一句话来说就是:关键字id进行拼接. 混合搜索示例: 数据库设计: 视频方向: 1 2 ...

  4. 漂亮！Javascript代码模仿淘宝宝贝搜索结果的分页显示效果

    分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager  JS ...

  5. 淘宝卖家搜索器V1.6算法注册机。

    该软件的算法非常简单,适合小白练手.(E语言写的)1.OD加载该软件,输入bp MessageBoxA 2.点击注册 3.OD就会中断下来了 4.按ALT+K打开调用堆栈 5.往上翻,就来到算法处了 ...

  6. solr入门之參考淘宝搜索提示功能优化拼音加汉字搜索功能

    首先看一下从淘宝输入搜索keyword获取到的一些数据信息: 第一张:使用拼音的全程来查询 能够看到提示的是匹配的转换的拼音的方式,看最后一个提示项 这里另一个在指定分类文件夹下搜索的功能,难道后台还 ...

  7. selenium+PhantomJS 抓取淘宝搜索商品

    最近项目有些需求,抓取淘宝的搜索商品,抓取的品类还多.直接用selenium+PhantomJS 抓取淘宝搜索商品,快速完成. #-*- coding:utf-8 -*-__author__ =''i ...

  8. python推荐淘宝物美价廉商品

    完成的目标: 输入搜索的商品 以及 淘宝的已评价数目.店铺的商品描述(包括如实描述.服务态度.快递的5.0打分): 按要求,晒选出要求数量的结果,并按"物美价廉算法"排序后输出 思 ...

  9. 飞流直下的精彩 -- 淘宝UWP中瀑布流列表的实现

    在淘宝UWP中,搜索结果列表是用户了解宝贝的重要一环,其中的图片效果对吸引用户点击搜索结果,查看宝贝详情有比较大的影响.为此手机淘宝特意在搜索结果列表上采用了2种表现方式:一种就是普通的列表模式,而另 ...

随机推荐

  1. hdu 1863 畅通工程（最小生成树，基础）

    题目 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include<string.h> #include <ma ...

  2. Opc

    http://www.tuicool.com/articles/nymUz2 http://blog.chinaunix.net/uid-20692368-id-3434001.html http:/ ...

  3. **CI两种方式查询所返回的结果数量

    区别:第一个是有条件的:第二个没有条件 $this->db->count_all_results(); 允许你获得某个特定的Active Record查询所返回的结果数量.可以使用Acti ...

  4. Struts2 SSH整合框架返回json时，要注意懒加载问题

    返回的这个json对象,要保证它里面的所有属性都已经取出来了(即不是proxy或者是懒加载),否则当struts框架将该对象转化成json数据时,会报出一个no session的错误. 因此你要将该懒 ...

  5. linux 命令小例

    xargs示例: ls |xargs -i mv {}  /opt find示例: find -mtime +n -name “*.avi” -type f -exec rm {} \; find - ...

  6. hdu1151 Air Raid

    http://acm.hdu.edu.cn/showproblem.php?pid=1151 增广路的变种2:DAG图的最小路径覆盖=定点数-最大匹配数 #include<iostream> ...

  7. hdu1116

    http://acm.hdu.edu.cn/showproblem.php?pid=1116 #include<stdio.h> #include<math.h> #inclu ...

  8. sql sever 2000

    sql sever 2000安装图解 浏览:15396 | 更新:2011-12-14 16:33 1 2 3 4 5 6 7 分步阅读 做为入门系统管理员,sqlsever2000是必会项目,因为市 ...

  9. 查看服务器的TCP/IP（http）连接情况

    6.那具体到,怎样监听一个具体程序的TCP/IP连接情况呢???!! 就要用:netstat -n|grep 80 命令来查看具体端口对应程序的TCP/IP连接情况了 netstat -n|grep ...

  10. Android：AlertDialog对话框

    1.简单的ALertDialog: Dialog alertDialog = new AlertDialog.Builder(this) .setTitle("标题") .setM ...