html5语音输入功能speech属性

最新推荐文章于 2024-08-16 10:59:26 发布

hacker5077

最新推荐文章于 2024-08-16 10:59:26 发布

阅读量528

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签：人工智能移动开发

本文链接：https://blog.youkuaiyun.com/hacker5077/article/details/84363591

html 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML5中语音输入功能的使用方法，包括如何在Chrome浏览器中启用语音输入，以及如何设置语言种类和语音识别语法等。此外还提供了一个简单的示例来展示如何创建一个带有语音输入功能的搜索框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以前语音输入功能虽然没用过，但是看上去很高级的样子，有了智能手机之后，在ios和android中的语音输入，特别是iPhone的Siri，让一切变得如此简单，嘎嘎。
当然我不是在这里要实现如此强悍的功能，只是说说html5中的语音输入功能speech属性，大家先可以看看W3C文档：http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html
看上去很强大的样子，不过不要高兴的太早，因为大部分的浏览器还没有实现这些接口，目前可以用的只有chrome（11版本以上）的私有属性：x-webkit-speech。例如我们看看淘宝在chrome下的搜索框，如淘宝的语音搜索；

实现语音输入也非常简单：

<input id="q" name="q" accesskey="s" autofocus="true" autocomplete="off" x-webkit-speech  x-webkit-grammar="builtin:translate" />

简单的来说，我们只要在input元素上加上x-webkit-speech属性就可以了，当然你如果用xhtml，那么标准的写法是：x-webkit-speech=”x-webkit-speech”；

<input  name="q"  x-webkit-speech />

其他属性：
lang
设置语言种类：

<input lang="zh-CN" type="text" />

x-webkit-grammar
语音识别语法，取值：
translations—说一个词，并把它翻译
definitions—说一个词，并且获得定音
directions—说一个地址，要求行车路线
dictation
…
事件
onwebkitspeechchange
语音输入事件，当发声语音改变时触发：

<form action="http://www.google.com/search" >
<input type="search" name="q" lang="zh-CN" x-webkit-speech x-webkit-grammar="builtin:search" onwebkitspeechchange="startSearch(event)"/>
</form>

转载《[url=http://www.css88.com/archives/4800]html5语音输入功能speech属性[/url]》