作为一个专业的淘宝控，不知道从什么时候开始发现淘宝上居然还有语音搜索，好吧，因为好奇心作祟还是想一探究竟。不过我想仔细一点的人，都会发现在只有在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. Unity3D 游戏开发应用篇——每日登陆（持久化类实现）

    上一篇中我们实现用本地文件实现了持久化类的保存,当然小型数据用PlayerPrefs存储,或者采用XML服务器持久化也行.因为我涉及的角色类和玩家类数据比较多,加上项目要求尽量少与服务器交互,所以采用 ...

  2. 【设计模式六大原则5】迪米特法则（Law Of Demeter）

      定义:一个对象应该对其他对象保持最少的了解. 问题由来:类与类之间的关系越密切,耦合度越大,当一个类发生改变时,对另一个类的影响也越大. 解决方案:尽量降低类与类之间的耦合. 自从我们接触编程开始 ...

  3. 核稀疏表示分类（KSRC）

    参考:<Kernel SparseRepresention-Based Classifier> 原文地址:http://www.cnblogs.com/Rosanna/p/3372153. ...

  4. 【转载】Dom篇

    一. 初探Dom     1. Dom介绍 二. Dom基础     1. window顶级对象     2. body.document对象事件     3. 通用的HTML元素的事件     4. ...

  5. ASP.NET 免费开源控件

    AspNetPager分页控件(当前版本:7.5.1) AspNetPager分页控件是应用于ASP.NET WebForm网站或应用程序中的自定义分页控件,支持默认的回发(Postback)分页和U ...

  6. 与Google轻轻地擦肩而过

    第一集 因为那几年三天两头往硅谷里飞,所以我实在记不清这个故事到底是发生在98年还是99年夏天某日的一个下午. 那天我和Excite.com的创始人Mark V. H.在Palo Alto的一家餐厅共 ...

  7. Android 给listview设置分割线与边界的距离

    ListView可通过配置 android:dividerline android:dividerHeight 来实现分割listview中item的效果,如图: 如果想跟上图一样实现这种有设计的分割 ...

  8. Android Handler传值方式

    前面介绍handler的时候,也用到过几种传值方式,今天来总结一下,并且重点说一下bundle方式,代码如下: package com.handlerThread; import android.ap ...

  9. nginx的location配置

    http://blog.sina.com.cn/s/blog_97688f8e0100zws5.html http://blog.csdn.net/yanook/article/details/100 ...

  10. 解决Cygwin中vim的backspace不能正常使用(转）

    转载于:http://blog.chinaunix.net/uid-20614631-id-1914849.html  亲测可用 先把Cygwin下载下来,想在linux下编程的话一定要安装vim,g ...