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

    今天安装STLport,网上搜资料安装好久,都不行,因为STLport 的版本不对,我这是STLport-5.2.1新版本. (注意:下面的步骤都在一个cmd里操作,很简单的原因:环境变量啊) 1.首 ...

  2. Unity3D脚本中文系列教程(十五)

    http://dong2008hong.blog.163.com/blog/static/4696882720140322449780/ Unity3D脚本中文系列教程(十四) ◆ LightRend ...

  3. 【unity3d游戏开发之基础篇】unity3d射线的原理用法以及一个利用射线实现简单拾取的小例子

    原地址:http://www.cnblogs.com/xuling/archive/2013/03/04/2943154.html 最近开始研究U3D,它的强大就不多说了, 今天研究了研究射线相关东西 ...

  4. Unity3d 接入 移动MM支付SDK(2.3) 全攻略

    原地址:http://blog.csdn.net/dingxiaowei2013/article/details/26842177 先将例程运行起来 下载例程(csdn积分不够上传不了,只能用百度网盘 ...

  5. mutable关键字

    mutalbe的中文意思是“可变的,易变的”,跟constant(既C++中的const)是反义词.在C++中,mutable也是为了突破const的限制而设置的.被mutable修饰的变量(muta ...

  6. hdoj 1596 find the safest road

    题目传送:http://acm.hdu.edu.cn/showproblem.php?pid=1596 分析:Dijkstra变体,最短路径判断计算方式:Safe(P) = s(e1)*s(e2)…* ...

  7. Test Markdown Editor

    Last night, I just saw a cute blogger's homepage. Then I want to write something. But anyway, I use ...

  8. 【Linux高频命令专题(12)】touch.md

    概述 一般在使用make的时候可能会用到,用来修改文件时间,或者新建一个不存在的文件. 命令格式 touch [选项]... 文件... 命令参数 -a 或--time=atime或--time=ac ...

  9. 【Linux高频命令专题(10)】mv

    概述 mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 命令格式 mv [选项] 源文件或目 ...

  10. QT里使用sqlite的问题，好多坑

    1. 我使用sqlite,开发机上好好的,测试机上却不行.后来发现是缺少驱动(Driver not loaded Driver not loaded),代码检查了又检查,发现应该是缺少dll文件(系统 ...