HTML5 语音搜索只需一句代码

2016-02-19 12:16 9 1 收藏

下面图老师小编跟大家分享HTML5 语音搜索只需一句代码,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

【 tulaoshi.com - Web开发 】

淘宝网的语音搜索也有了一阵子了,但似乎都没看到相关的博客或帖子在说这个如何实现,今天查了点资料,发现原来实现是如此简单,可能是因为太简单了,也就没有人讨论了吧。

其实实现只需一句代码即可:

x-webkit-speech

一看到这句代码,想到了什么?对,这说明语音搜索只支持webkit内核浏览器,那么这段代码具体要放在哪呢?


代码如下:

input type="text" class="text" name="value_2" id="value_2" x-webkit-speech

放在文本输入框内就行了,其他的什么都不用做,看

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

当然还有一些其他的参数,比如设置语音限制语言种类

代码如下:

input type="text" class="text" name="value_2" id="value_2" x-webkit-speech lang="zh-CN"

还有设置语音输入语法的参数,这个就比较试用于搜索框。加上这参数后,系统就会自动去掉的、啦这类无意义的字

代码如下:

input type="text" class="text" name="value_2" id="value_2" x-webkit-speech x-webkit-grammar="bUIltin:search"

当然在测试时候发现一个小问题,就是当具有语音搜索的页面是iframe页面时,点击麦克风后,请开始说话这浮动层就不跟随input输入框了

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1600446.html

延伸阅读
标签: Web开发
复制代码代码如下: !DOCTYPE HTML html head meta charset="UTF-8" style type="text/css" canvas{position:absolute;top:0px;left:0px;} /style title时钟/title /head body canvas id="canvas" width="200" height="200"/canvas canvas id="p_canvas" width="200" height="200"/canvas script type="text/javascript" //获取绘图对...
标签: Web开发
演示地址: HTML5拍照演示 首先,我们看看HTML代码结构,当然,这部分的DOM内容应该是在用户允许使用其摄像头事件出发后,动态加载生成的。 注意: 我们采用的是 640X480的分辨率,如果采用JS动态生成,那么您是可以灵活控制分辨率的。 代码如下: !-- 声明: 此div应该在允许使用webcam,网络摄像头之后动态生成 宽高: 640 *480,当然,...
标签: Web开发
--- 请使用新版的firefox或chrome等支持video格式的浏览器打开 多个视频加载,图片浏览: 1、渐进增加,不支持video格式浏览器用flash代替 2、播放进度显示 3、加载进度显示 4、播放时间和总时间显示 5、音量调节 并保存在本地localStrong 6、非全屏/全屏操作 7、1个页面支持多个MiranaVideo实例 8、异常流,加入错误提示 9、loadin...
标签: Web开发
核心代码: 复制代码代码如下: $(function(){ var can = $("#can").get(0); var txi = can.getContext("2d"); txi.beginPath(); txi.moveTo(105,105); txi.lineTo(105,45); txi.lineTo(45,105); txi.closePath(); txi.stroke(); txi.beginPath(); txi.moveTo(25,25); txi.lineTo(100,25); txi.lineTo(25,100); txi.stroke(); })...
标签: Web开发
W3C 在 2008年 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性:嵌入音频、视频、图片的函数、客户端数据存储,以及交互式文档。其他特性包括新的页面元素,比如 header, section, footer, 以及 figure。 通过制...

经验教程

372

收藏

51
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部