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 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
纯CSS3实现3D旋转书本效果
Mar 21 HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
CSS3属性box-sizing使用指南
Dec 09 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
May 09 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
html2canvas截图空白问题的解决
Mar 24 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 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获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
php实现三级级联下拉框
2016/04/17 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
javascript动画浅析
2012/08/30 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python命令行参数sys.argv使用示例
2014/01/28 Python
python实现图片批量压缩程序
2018/07/23 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
解决pycharm下pyuic工具使用的问题
2020/04/08 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
简短大学毕业感言
2014/01/18 职场文书
体育比赛口号
2014/06/09 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
教师个人考察材料
2014/12/16 职场文书
作文批改评语
2014/12/25 职场文书
单位工作证明范本
2015/06/15 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL