作为一个专业的淘宝控，不知道从什么时候开始发现淘宝上居然还有语音搜索，好吧，因为好奇心作祟还是想一探究竟。不过我想仔细一点的人，都会发现在只有在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. JS内存管理测试

    打开调试器,切换到timer,点击左下角的record按钮开始,切换到memory视图,在文档中点击鼠标左右键,看股价走势图 function Allocate(kbs){ this.mem = ne ...

  2. Unity3D研究院之IOS全自动编辑framework、plist、oc代码

    Unity打IOS时会先生成一个Xcode工程,如果你需要增加一些第三方的framework那么需要手动一条一条的添加,这太烦了..而且可能你还需要修改Plist文件,甚至还可能要修改unity自动生 ...

  3. 【leetcode】Find Peak Element ☆

    A peak element is an element that is greater than its neighbors. Given an input array where num[i] ≠ ...

  4. Oracle 9 - 分析undo和snapshot too old错误

    什么操作会生成undo INSERT生成的UNDO最少,只要记录新的rowid UPDATE生成的undo多一点,它要记录修改前的数据中的那部分. DELETE生成最多的undo, 因为它要记录整行被 ...

  5. wireshark: there are no interfaces on which a capture can be done

    权限问题,简单的直接sudo就行. 更安全的做法是: # chmod 4755 /usr/bin/dumpcap dumpcap的所在目录可用whereis命令查看.

  6. 【mongoDB高级篇①】聚集运算之group,aggregate

    group 语法 db.collection.group({ key:{field:1},//按什么字段进行分组 initial:{count:0},//进行分组前变量初始化,该处声明的变量可以在以下 ...

  7. 包装类型的比较，如：Integer，Long，Double

    Integer, Long, Double等基本类型的包装类型,比较时两种方法:第一种:equals,  第二种: .intValue(),  .longValue() ,  .doubleValue ...

  8. java io异步

    1.一般来说,可以通过多线程的方式来实现异步 2.同步和异步着重点在于多个任务的执行过程中,一个任务的执行是否会导致整个流程的暂时等待: 3.而阻塞和非阻塞着重点在于发出一个请求操作时,如果进行操作的 ...

  9. Hibernate逍遥游记-第12章 映射值类型集合-005对集合排序(<order-by>\<sort>)

    1. 2. <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//Hibernate ...

  10. OpenCV源码阅读(3)---base.hpp

    base.h处于core模块中,是OpenCV的核心类.其作用是定义了OpenCV的基本错误类型,在程序运行出现错误是抛出错误,防止数据溢出.总而言之,其功能主要是考虑程序的健壮性. 头文件 #ifn ...