x-webkit-speech -- 实现语音输入

最新推荐文章于 2021-05-30 21:08:25 发布
原创 最新推荐文章于 2021-05-30 21:08:25 发布 · 852 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了Chrome浏览器中用于实现语音输入的两个实验性属性：x-webkit-speech 和 x-webkit-grammar。前者允许用户通过语音输入文本，并支持设置语言及语音变化事件；后者则提供了对输入语法的控制。

1、x-webkit-speech

 

    目前只有Chrome 11+的支持

 

    属性和事件介绍：

 

  •   lang 
html
<input type="text" x-webkit-speech lang="zh-CN"/>  
  •   onwebkitspeechchange 
       语音发生变化时候触发的
 
2、x-webkit-grammar
 
      可以控制输入的语法
chrome-speechifier:Speechifier 是一个简单、静音的 Chrome 扩展程序，它使每个文本框都成为语音输入框。 使用此扩展程序，您可以与浏览器对话并输入您在页面上说的话。 它通过将“x-webkit-speech”属性添加到页面上的合格 HTML 元素来利用 Chrome 的内置但被严重低估的 Web Speech API
06-22
chrome-speechifier Speechifier 是一个简单、静音的 Chrome 扩展程序，它使每个文本框都成为语音输入框。 使用此扩展程序，您可以与浏览器对话并输入您在页面上说的话。 它通过将“x-webkit-speech”属性添加到页面上的合格 HTML 元素来利用 Chrome 的内置但被严重低估的 Web Speech API。
精选资源
speech-nav:使用语音导航网站
07-23
这个技术允许用户通过语音输入来与网页进行交互，为用户提供了一种无需物理键盘或触摸屏幕的新型交互方式。这种功能对于无障碍访问和增强现实应用尤其有用。 **webkitSpeechRecognition API** `...
x-webkit-speech 语音输入
iteye_8029的博客
09-07 262
最近发现了chrome的一个屌爆了的功能。语音输入，经测试准确率很高。而且支持中文和英文口语输入，其他语言应该也是可以支持的。运用这个可以在搜索框中加入语音输入功能，不过目前只有Chrome 11及以上版本才支持。 可以用chrome浏览器在这里试试效果，点击话筒即可： 实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。样式如下：...
可以用chrome浏览器在这里试试效果，点击话筒即可：
java开发指南博客 【转载】
05-21 479
现在各大网站都在搜索框中加入了语音输入功能，不过目前只有Chrome 11及以上版本才支持。 可以用chrome浏览器在这里试试效果，点击话筒即可： 实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。 1 &lt;inputtype="text"x-webkit-speech /&gt; ...
X-WEBKIT-SPEECH 语音输入功能
简单爱你所爱、世界也变得大了起来
10-24 2630
X-WEBKIT-SPEECH 语音输入功能 现在各大网站都在搜索框中加入了语音输入功能，不过目前只有Chrome 11及以上版本才支持。 可以用chrome浏览器在这里试试效果，点击话筒即可： 实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。 x-webkit-speech /> 相关的属性设置： lang 设置语
HTML5中x-webkit-speech语音输入功能
weixin_33795833的博客
06-14 310
如今各大站点都在搜索框中增加了语音输入功能，只是眼下仅仅有Chrome 11及以上版本号才支持。 能够用chrome浏览器在这里试试效果，点击话筒就可以： 实现起来也很easy，为input加入名为 x-webkit-speech 的属性即可了。 &lt;input type="text" x-webkit-speech /&gt; ...
x-webkit-speech
最新发布
01-08
当希望在页面上启用语音输入功能时，在 `<input>` 或者 `<textarea>` 标签中加入 `x-webkit-speech` 属性即可实现这一目标。具体来说： ```html <input type="text" x-webkit-speech /> ``` 上述代码会在输入框...
HTML5为输入框添加语音输入功能的实现方法
09-27
在HTML5中，通过为`<input>`标签添加`speech`或`x-webkit-speech`属性，即可启用语音输入功能。这些属性允许用户点击输入框右侧的麦克风图标，从而激活语音识别功能，用户说出的话将被转换为文本并填充到输入框中。...
关于x-webkit-speech 语音输入功能体验与小结
亚
08-18 3762
从今年开始很多网站的搜索都逐渐改成了带有语音搜索的input文本框。从淘宝到各个小站，乃至于博客。网页上面右键查看源码，我们不难发现，其实它只是调用了Google的API而已。 我实验了几次，例如我在淘宝语音“ 诺基亚 Windows Phone Lumia 900“，对于我这个南方口音，普通话不是绝对标准的人来说，能全部返回，并且能进行空格分词，从个人而言还是非常满意的。但是唯一的缺点是在网速不
x-webkit-speech语音输入
jyb123的专栏
06-24 701
Google搜索的语音输入功能： 1. 检测浏览器是否支持 if (document.createElement("input").webkitSpeech === undefined) { alert("Speech input is not supported in your browser."); } 2. 下面说下怎么实现，其实很简单。
神器x-webkit-speech
本本技术
10-25 301
神器x-webkit-speech   为input添加名为 x-webkit-speech 的属性就行了。不过只在Chrome浏览器下才有这个功能，不妨先体验一下吧。   &lt;input type="text" x-webkit-speech/&gt;   &lt;input type="text" x-webkit-speech/&gt;   【相关属性设置】   ...
支持语音输入的文本框(x-webkit-speech)
三寿的专栏
04-09 2018
相信大家现在在浏览网页时都不难看到一些网站的文本框中带有一个话筒(点击话筒可以语音输入内容到文本框中)，下面给大家介绍如何使自己的网站也支持语音输入内容。 现在各大网站都在搜索框中加入了语音输入功能，不过目前只有Chrome 11及以上版本才支持。可以用chrome浏览器在这里试试效果，点击话筒即可： 实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行
x-webkit-speech 语音输入功能
SYYling的专栏
06-27 1551
今天无意中查看天猫审查元素发现的，The HTML Speech Input API aims to provide web developers with features that are typically not available when using standard speech recognition software to replace keyboard input in
使用x-webkit-speech令网站支持语音输入功能
编程手札
03-05 5584
今天仔细看了看163邮箱，发觉搜索框有个小麦克风标志，联想在词霸也见过类似标志，突然生成好奇心用Chorme分析了一个源代码发现了个属性：x-webkit-speech和onwebkitspeechchange，接着Google了一下才知道是HTML5下的属性，通过使用google的语音服务支持语音输入功能。 Google搜索的语音输入功能： 检测浏览器是否支持
HTML5语音输入x-webkit-speech方法支持webkit内核
wtz1234567的博客
04-19 370
用法很简单只需要在input添加属性x-webkit-speech即可，例子如下：&lt;input type="text" x-webkit-speech /&gt;这样你的输入框右边里就多了个「小话筒」，点击的时候就会提示  这时说出来识别后就可以了，我测试下来，中文英语的识别率还挺高的。 语音输入其他属性： lang 这玩意可以强制输入框里面的语音的语言种类，例如&lt;i...
介绍一下x-webkit-speech -------实现语音输入
Focus-Fe
05-08 451
其实大家都能从一淘啊或者淘宝相关的产品里面看到这样的输入框：    好奇的人都会查看源码看看到底是什么东东？   里面有两个东东：   1、x-webkit-speech       目前只有Chrome 11+的支持       属性和事件介绍：       lang  &lt;input type="text" x-webkit-speech la...
html5 语音输入唤醒,HTML5中x-webkit-speech语音输入功能
weixin_31856057的博客
05-30 727
如今各大站点都在搜索框中增加了语音输入功能，只是眼下仅仅有Chrome 11及以上版本号才支持。能够用chrome浏览器在这里试试效果，点击话筒就可以：实现起来也很easy，为input加入名为 x-webkit-speech 的属性即可了。相关的属性设置：lang设置语言种类：onwebkitspeechchange语音输入事件，当发声语音改变时触发：x-webkit-grammar语音输入语法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值