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

最新推荐文章于 2025-05-23 14:06:48 发布
最新推荐文章于 2025-05-23 14:06:48 发布 · 431 阅读 · 0
文章标签：

#x-webkit-speech

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

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

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

 



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

 


里面有两个东东：

 

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 2173
前端想要实现语音转文字，其实不需要任何云服务，浏览器自带的api就能搞定。下面是已经封装好的代码，
speech-nav:使用语音导航网站
07-23
这个技术允许用户通过语音输入来与网页进行交互，为用户提供了一种无需物理键盘或触摸屏幕的新型交互方式。这种功能对于无障碍访问和增强现实应用尤其有用。 **webkitSpeechRecognition API** `...
x-webkit-speech 语音输入
iteye_8029的博客
09-07 240
最近发现了chrome的一个屌爆了的功能。语音输入，经测试准确率很高。而且支持中文和英文口语输入，其他语言应该也是可以支持的。运用这个可以在搜索框中加入语音输入功能，不过目前只有Chrome 11及以上版本才支持。 可以用chrome浏览器在这里试试效果，点击话筒即可： 实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。样式如下：...
HarmonyOS 5.0.0 或以上：实现 WebView 内语音识别（SpeechRecognition）实时转写实战
最新发布
2501_92048894的博客
05-23 326
本篇讲解如何通过 WebView 组件调用浏览器原生的接口，实现语音识别并实时将语音转为文字，适用于语音助手、口述笔记、无障碍输入等场景。
HTML5中x-webkit-speech语音输入功能
weixin_33795833的博客
06-14 295
如今各大站点都在搜索框中增加了语音输入功能，只是眼下仅仅有Chrome 11及以上版本号才支持。 能够用chrome浏览器在这里试试效果，点击话筒就可以： 实现起来也很easy，为input加入名为 x-webkit-speech 的属性即可了。 &lt;input type="text" x-webkit-speech /&gt; ...
神器x-webkit-speech
本本技术
10-25 281
神器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 2599
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 6972
使用语音输入作用有： 1.提供除了键盘和鼠标的另一个输入方法，针对pc用户，当键盘不可用时也可以使用语音输入。 2.为手机用户提供更加方便的输入方法。 lang 这玩意可以强制输入框里面的语音的语言种类，例如 1.支持的浏览器 x-webkit-speech是webkit内核浏览器的私有属性(废话)。但现在只能在google的chrome 11以上才能使用。 实现
x-webkit-speech 语音输入功能
SYYling的专栏
06-27 1512
今天无意中查看天猫审查元素发现的，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 676
Google搜索的语音输入功能： 1. 检测浏览器是否支持 if (document.createElement("input").webkitSpeech === undefined) { alert("Speech input is not supported in your browser."); } 2. 下面说下怎么实现，其实很简单。
x-webkit-语音输入和文本区域
cunbei2644的博客
09-26 186
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 449
现在各大网站都在搜索框中加入了语音输入功能，不过目前只有Chrome 11及以上版本才支持。 可以用chrome浏览器在这里试试效果，点击话筒即可： 实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。 1 &lt;inputtype="text"x-webkit-speech /&gt; ...
HTML5语音输入x-webkit-speech方法支持webkit内核
wtz1234567的博客
04-19 335
用法很简单只需要在input添加属性x-webkit-speech即可，例子如下：&lt;input type="text" x-webkit-speech /&gt;这样你的输入框右边里就多了个「小话筒」，点击的时候就会提示  这时说出来识别后就可以了，我测试下来，中文英语的识别率还挺高的。 语音输入其他属性： lang 这玩意可以强制输入框里面的语音的语言种类，例如&lt;i...
html5 语音输入唤醒,HTML5中x-webkit-speech语音输入功能
weixin_31856057的博客
05-30 684
如今各大站点都在搜索框中增加了语音输入功能，只是眼下仅仅有Chrome 11及以上版本号才支持。能够用chrome浏览器在这里试试效果，点击话筒就可以：实现起来也很easy，为input加入名为 x-webkit-speech 的属性即可了。相关的属性设置：lang设置语言种类：onwebkitspeechchange语音输入事件，当发声语音改变时触发：x-webkit-grammar语音输入语法...
关于x-webkit-speech 语音输入功能体验与小结
亚
08-18 3614
从今年开始很多网站的搜索都逐渐改成了带有语音搜索的input文本框。从淘宝到各个小站，乃至于博客。网页上面右键查看源码，我们不难发现，其实它只是调用了Google的API而已。 我实验了几次，例如我在淘宝语音“ 诺基亚 Windows Phone Lumia 900“，对于我这个南方口音，普通话不是绝对标准的人来说，能全部返回，并且能进行空格分词，从个人而言还是非常满意的。但是唯一的缺点是在网速不
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值