手机
当前位置:查字典教程网 >网页设计 >HTML5教程 >用html5实现语音搜索框的方法
用html5实现语音搜索框的方法
摘要:我们先看下他们的不同显示。下面是在火狐下的截图:下面这个是在chrome下的截图:能猜想到的,就是写的代码肯定是不兼容的。不过你会发现真是比...

 我们先看下他们的不同显示。

下面是在火狐下的截图:

1

下面这个是在chrome下的截图:

2

能猜想到的,就是写的代码肯定是不兼容的。不过你会发现真是比较简单的,就算你是前端初学者你也会明白

复制代码

代码如下:

其中参数的意义:

x-webkit-speech:就是让你的输入框的右边出现一个小话筒,有了语音的功能。

lang:则是 强制输入框里面的语音的语言种类,例如上面写的 lang="zh-CN"指的是简体中文。

x-webkit-grammar:指的是语音输入语法,"builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符。

注:不过这个硬件方面的兼容性还是有待提高,因为当你中英夹杂语音的时候,估计是会状况百出的。

【用html5实现语音搜索框的方法】相关文章:

基于html5 canvas实现漫天飞雪效果实例

使用HTML5做个画图板的方法介绍

实例讲解使用HTML5 Canvas绘制阴影效果的方法

用HTML5的canvas实现一个炫酷时钟效果

HTML5 实现一个访问本地文件的实例

html5调用音乐播放器的几种常用语法

详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

用html5实现的简单幻灯片实例

html5拍照功能实现代码(htm5上传文件)

HTML5的hidden属性兼容老浏览器的方法

精品推荐
分类导航