介绍一下x-webkit-speech -------实现语音输入

最新推荐文章于 2021-05-30 21:08:25 发布
最新推荐文章于 2021-05-30 21:08:25 发布 · 447 阅读 · 0
文章标签：

#x-webkit-speech

本文深入探讨了HTML5中用于语音输入的`x-webkit-speech`和`x-webkit-grammar`两个特性，详细介绍了其属性、事件及使用方法，并针对在iframe内部遇到的提示层位置偏移问题提供了解决方案。

其实大家都能从一淘啊或者淘宝相关的产品里面看到这样的输入框：

 



 好奇的人都会查看源码看看到底是什么东东？

 


里面有两个东东：

 

1、x-webkit-speech

 

    目前只有Chrome 11+的支持

 

    属性和事件介绍：

 

 

  •   lang  
<input type="text" x-webkit-speech lang="zh-CN"/>
 

 

  •   onwebkitspeechchange 
       语音发生变化时候触发的
 
 
2、 x-webkit-grammar
 
      可以控制 输入的语法
 
 
    Bug场景：
 
    在iframe里面的提示层有位置偏移？ http://www.php100.com/html/webkaifa/HTML5/2012/1212/11757.html
 
 
webkitSpeechRecognition:HTML5语音识别文字（直接运行）
zhoudonggu001的博客
06-29 2315
前端想要实现语音转文字，其实不需要任何云服务，浏览器自带的api就能搞定。下面是已经封装好的代码，
精选资源
speech-nav:使用语音导航网站
07-23
这个技术允许用户通过语音输入来与网页进行交互，为用户提供了一种无需物理键盘或触摸屏幕的新型交互方式。这种功能对于无障碍访问和增强现实应用尤其有用。 **webkitSpeechRecognition API** `...
x-webkit-speech 语音输入
iteye_8029的博客
09-07 258
最近发现了chrome的一个屌爆了的功能。语音输入，经测试准确率很高。而且支持中文和英文口语输入，其他语言应该也是可以支持的。运用这个可以在搜索框中加入语音输入功能，不过目前只有Chrome 11及以上版本才支持。 可以用chrome浏览器在这里试试效果，点击话筒即可： 实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。样式如下：...
HTML5中x-webkit-speech语音输入功能
weixin_33795833的博客
06-14 306
如今各大站点都在搜索框中增加了语音输入功能，只是眼下仅仅有Chrome 11及以上版本号才支持。 能够用chrome浏览器在这里试试效果，点击话筒就可以： 实现起来也很easy，为input加入名为 x-webkit-speech 的属性即可了。 &lt;input type="text" x-webkit-speech /&gt; ...
神器x-webkit-speech
本本技术
10-25 298
神器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 语音输入功能
简单爱你所爱、世界也变得大了起来
10-24 2625
X-WEBKIT-SPEECH 语音输入功能 现在各大网站都在搜索框中加入了语音输入功能，不过目前只有Chrome 11及以上版本才支持。 可以用chrome浏览器在这里试试效果，点击话筒即可： 实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。 x-webkit-speech /> 相关的属性设置： lang 设置语
x-webkit-speech
最新发布
01-08
当希望在页面上启用语音输入功能时，在 `<input>` 或者 `<textarea>` 标签中加入 `x-webkit-speech` 属性即可实现这一目标。具体来说： ```html <input type="text" x-webkit-speech /> ``` 上述代码会在输入框...
chrome-speechifier:Speechifier 是一个简单、静音的 Chrome 扩展程序，它使每个文本框都成为语音输入框。 使用此扩展程序，您可以与浏览器对话并输入您在页面上说的话。 它通过将“x-webkit-speech”属性添加到页面上的合格 HTML 元素来利用 Chrome 的内置但被严重低估的 Web Speech API
06-22
Speechifier 是一个简单、静音的 Chrome 扩展程序，它使每个文本框都成为语音输入框。 使用此扩展程序，您可以与浏览器对话并输入您在页面上说的话。 它通过将“x-webkit-speech”属性添加到页面上的合格 HTML 元素...
精选资源
Webkit-Speech-Recognition-Example:与Webkit浏览器引擎一起使用的非常简单的语音识别示例，因此只有Webkit浏览器（例如Chrome）
05-17
controller.js处理按钮输入并在speechRecognition.js开始识别 用法 在服务器上运行它，例如使用python： $ python3 -m http.server Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ... 使用Webkit...
x-webkit-speech 输入框中添加“小话筒”
dazhi_100的专栏
06-13 7000
使用语音输入作用有： 1.提供除了键盘和鼠标的另一个输入方法，针对pc用户，当键盘不可用时也可以使用语音输入。 2.为手机用户提供更加方便的输入方法。 lang 这玩意可以强制输入框里面的语音的语言种类，例如 1.支持的浏览器 x-webkit-speech是webkit内核浏览器的私有属性(废话)。但现在只能在google的chrome 11以上才能使用。 实现
x-webkit-speech 语音输入功能
SYYling的专栏
06-27 1545
今天无意中查看天猫审查元素发现的，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语音输入
jyb123的专栏
06-24 699
Google搜索的语音输入功能： 1. 检测浏览器是否支持 if (document.createElement("input").webkitSpeech === undefined) { alert("Speech input is not supported in your browser."); } 2. 下面说下怎么实现，其实很简单。
x-webkit-语音输入和文本区域
cunbei2644的博客
09-26 205
New hotness, speech input. (The demo, the demo) 新的热点，语音输入。 ( 演示，演示 ) You get an input: 您得到输入： <input> <input> You add an x-webkit-speech attribute 您添加一个x-webkit-speech属性 <input...
可以用chrome浏览器在这里试试效果，点击话筒即可：
java开发指南博客 【转载】
05-21 473
现在各大网站都在搜索框中加入了语音输入功能，不过目前只有Chrome 11及以上版本才支持。 可以用chrome浏览器在这里试试效果，点击话筒即可： 实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。 1 &lt;inputtype="text"x-webkit-speech /&gt; ...
HTML5语音输入x-webkit-speech方法支持webkit内核
wtz1234567的博客
04-19 358
用法很简单只需要在input添加属性x-webkit-speech即可，例子如下：&lt;input type="text" x-webkit-speech /&gt;这样你的输入框右边里就多了个「小话筒」，点击的时候就会提示  这时说出来识别后就可以了，我测试下来，中文英语的识别率还挺高的。 语音输入其他属性： lang 这玩意可以强制输入框里面的语音的语言种类，例如&lt;i...
使用x-webkit-speech令网站支持语音输入功能
编程手札
03-05 5579
今天仔细看了看163邮箱，发觉搜索框有个小麦克风标志，联想在词霸也见过类似标志，突然生成好奇心用Chorme分析了一个源代码发现了个属性：x-webkit-speech和onwebkitspeechchange，接着Google了一下才知道是HTML5下的属性，通过使用google的语音服务支持语音输入功能。 Google搜索的语音输入功能： 检测浏览器是否支持
html5 语音输入唤醒,HTML5中x-webkit-speech语音输入功能
weixin_31856057的博客
05-30 727
如今各大站点都在搜索框中增加了语音输入功能，只是眼下仅仅有Chrome 11及以上版本号才支持。能够用chrome浏览器在这里试试效果，点击话筒就可以：实现起来也很easy，为input加入名为 x-webkit-speech 的属性即可了。相关的属性设置：lang设置语言种类：onwebkitspeechchange语音输入事件，当发声语音改变时触发：x-webkit-grammar语音输入语法...
关于x-webkit-speech 语音输入功能体验与小结
亚
08-18 3731
从今年开始很多网站的搜索都逐渐改成了带有语音搜索的input文本框。从淘宝到各个小站，乃至于博客。网页上面右键查看源码，我们不难发现，其实它只是调用了Google的API而已。 我实验了几次，例如我在淘宝语音“ 诺基亚 Windows Phone Lumia 900“，对于我这个南方口音，普通话不是绝对标准的人来说，能全部返回，并且能进行空格分词，从个人而言还是非常满意的。但是唯一的缺点是在网速不
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值