用html5实现语音搜索框的方法_html5教程技巧
程序员文章站
2022-03-21 18:21:51
...
我们先看下他们的不同显示。
下面是在火狐下的截图:
其中参数的意义:
x-webkit-speech:就是让你的输入框的右边出现一个小话筒,有了语音的功能。
lang:则是 强制输入框里面的语音的语言种类,例如上面写的 lang="zh-CN"指的是简体中文。
x-webkit-grammar:指的是语音输入语法,"builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符。
下面是在火狐下的截图:
下面这个是在chrome下的截图:
能猜想到的,就是写的代码肯定是不兼容的。不过你会发现真是比较简单的,就算你是前端初学者你也会明白
复制代码
代码如下:其中参数的意义:
x-webkit-speech:就是让你的输入框的右边出现一个小话筒,有了语音的功能。
lang:则是 强制输入框里面的语音的语言种类,例如上面写的 lang="zh-CN"指的是简体中文。
x-webkit-grammar:指的是语音输入语法,"builtin:search”值使得语音输入的内容尽量靠近搜索内容,去除多余的字符。
注:不过这个硬件方面的兼容性还是有待提高,因为当你中英夹杂语音的时候,估计是会状况百出的。
下一篇: PHP字符串的概念简介
推荐阅读
-
用html5实现语音搜索框的方法
-
HTML5为输入框添加语音输入功能的实现方法
-
html5配合css3实现带提示文字的输入框(摆脱js)_html5教程技巧
-
html5配合css3实现带提示文字的输入框(摆脱js)_html5教程技巧
-
js实现input密码框提示信息的方法(附html5实现方法)_javascript技巧
-
用HTML5实现手机摇一摇的功能的教程_html5教程技巧
-
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能_html5教程技巧
-
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法_html5教程技巧
-
用HTML5实现手机摇一摇的功能的教程_html5教程技巧
-
js实现input密码框提示信息的方法(附html5实现方法)_javascript技巧