HTML5怎样实现语音搜索

这篇文章主要为大家展示了“HTML5怎样实现语音搜索”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“HTML5怎样实现语音搜索”这篇文章吧。

公司主营业务：做网站、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出淳安免费做网站回馈大家。

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

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

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

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

可以控制输入框里面的语音的语言种类，例如

目前已知的只有onwebkitspeechchange，顾名思义，就是语音发生变化时触发的事件，一般可以作为提交 这样说完以后就自动搜索了。

x-webkit-grammar ：这个不是语音搜索用的属性，但是可以控制这个输入的语法，例如在做搜索框的话就可以用    x-webkit-grammar：

使得语音输入的内容尽量靠近搜索内容，去除多余的字符，例如「的」。

下面做一个小例子测试一下：

代码如下:

 

搜 索

效果如下：

以上是“HTML5怎样实现语音搜索”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！