HTML5 语音搜索(淘宝店语音搜素)

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

今天图老师小编给大家展示的是HTML5 语音搜索(淘宝店语音搜素)，精心挑选的内容希望大家多多支持、多多分享，喜欢就赶紧get哦！

【 tulaoshi.com - Web开发】

Html5支持语音搜索，可惜的是只有webkit核心的浏览器才能使用。用法很简单只需要在input添加属性x-webkit-speech即可，例子如下： input type="text" x-webkit-speech /

这样你的输入框右边里就多了个「小话筒」，点击的时候就会提示

这时说出来识别后就可以了，如淘宝店语音搜素：

语音输入其他属性： lang 就是语言种类

可以控制输入框里面的语音的语言种类，例如 input type="text" x-webkit-speech lang="zh-CN"/

（本文来源于图老师网站，更多请访问https://www.tulaoshi.com/webkaifa/）目前已知的只有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

效果如下：

来源:https://www.tulaoshi.com/n/20160219/1600418.html

上一篇：是否、可以再重來 - QQ情侣分组
下一篇： css3 transform 3d 使用css3创建动态3d立方体(html5实践)

看过《HTML5 语音搜索(淘宝店语音搜素)》的人还看了以下文章更多>>

HTML5 canvas 基本语法

标签： Web开发

HTML 5 canvas 基本语法简述 5 规范引进了很多新特性，其中最令人期待的之一就是元素。HTML 5 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个元素都有一个"上下文( context )" (想象成绘图板上的一页)，在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的提供图形绘制功能。 5 规...

一点资讯怎么用语音搜索

标签：手机软件应用软件

一点资讯怎么用语音搜索平时用一点资讯搜索新闻的时候，你还在用文字输入的方式吗?那就太OUT了，来试一试语音搜索吧，下面，小编就用这篇教程来教大家一点资讯语音搜索怎么用，一起来看看吧。 1)打开一点资讯，点击上方的; 2)点击右上角的，然后说出你要搜索的内容; 3)在应用识别了你说的话之后，点...

360浏览器语音搜索怎么用

标签：手机软件应用软件

360浏览器语音搜索怎么用 1)打开360浏览器，点击右上角的。 2)然后按住麦克风说话，比如小编说的，说完后360浏览器自动识别并搜索相关内容。注：更多精彩教程请关注图老师手机教程栏目，图老师手机数码群：296605639欢迎你的加入

QT语音怎么进行语音检测

QT语音怎么进行语音检测首先随便打开一个房间(可以是你要聊天的房间，这样不用那么麻烦切换来去)，在打开的房间面板下方麦克风右边有个下拉小箭头，选择语音检测打开后，就可以试麦了，这个面板说话只能自己听到，可以随便说说试试呢。如果不正常，就要检察下自己的设备是否正常了。

HTML5 新事件小结

标签： Web开发

HTML 元素可拥有事件属性，这些属性在浏览器中触发行为，比如当用户单击一个 HTML 元素时启动一段 JavaScript。下面列出的事件属性，可以把它们插入 HTML 标签来定义事件行为。 HTML 4.01 与 HTML 5 之间的差异 HTML 5 中的新事件：onabort, onbeforeunload, oncontextmenu, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondrags...

查看更多精彩>>