用法很简单
只需要在input添加属性x-webkit-speech
即可,例子如下:
<input type="text" x-webkit-speech /
>
这样你的输入框右边里就多了个「小话筒」,点击的时候就会提示
这时说出来识别后就可以了,我测试下来,中文英语的识别率还挺高的。
语音输入其他属性:
-
lang
这玩意可以强制输入框里面的语音的语言种类,例如
<input type="text" x-webkit-speech lang="zh-CN"/
> -
语音事件
目前已知的只有
onwebkitspeechchange
,顾名思义,就是语音发生变化时触发的事件,一般可以作为提交
<input type="text" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/
>
这样说完以后就自动搜索了 -
x-webkit-grammar
这个不是语音搜索用的属性,但是可以控制这个输入的语法,例如在做搜索框的话就可以用
<input type="text" x-webkit-speech x-webkit-grammar="bUIltin:search" /
>
使得语音输入的内容尽量靠近搜索内容,去除多余的字符,例如「的」
这个功能相当有趣,实用就不敢恭维了,主要是因为适用范围太小啊,所以只能希望HTML5尽快统一并应用了。
TextArea
对于TextArea是不能用上述功能的,不过可以从上述方法中变通使用。
<textareaid="txt"></textarea><inputx-webkit-speechid="mike"/>
设置css:
#mike{font-size:25px; width:25px; height:25px; cursor:pointer; border:none; position:absolute; margin-left:5px; outline:none; background:transparent; }#txt{height:150px; width:150px; }
再添加javascript处理:
varmike = document.getElementById('mike'); mike.onfocus = mike.blur; mike.onwebkitspeechchange = function(e){//console.log(e); // SpeechInputEventdocument.getElementById('txt').value = mike.value; };
效果如下:
演示地址:http://www.phpied.com/files/speech-input/speech.html
好了,这个功能只在chrome11及以后版本才支持的。其他浏览器暂时不支持的,不过貌似火狐可以通过插件支持,可以搜索一下。
参考资料:http://www.wufangbo.com/x-webkit-speech/
http://www.w3.org/2005/Incubator/htmlspeech/2010/10/google-api-draft.html
相关推荐
这里介绍的是大家以后要用到的html强大功能,可直接给输入框增加语音功能,下面我们先来看看实现方法。 大家可以看到在输入框右边的麦克风图标,点击麦克风就能够进行语音识别了。 其实很简单,语音识别是html5的...
EESEN END-TO-END SPEECH RECOGNITION USING DEEP RNN MODELS AND WFST-BASED DECODING
本语音(Text-to-Speech,以下简称TTS),它的作用就是把通过TTS引擎把文本转化为语音输出。本文不是讲述如何建立自己的TTS引擎,而是简单介绍如何运用Microsoft Speech SDK 建立自己的文本语音转换应用程序。 TTS
文本到语音合成系统通常由多个阶段组成,例如文本分析前端、声学模型和音频合成模块。构建这些组件通常需要广泛的领域专业知识,并且可能...此外,由于Tacotron在帧级别生成语音,因此它比样本级别的自回归方法快得多。
用于语音识别的Web Speech API的Vue包装器。 Web Speech API处于试验阶段,在生产中使用之前请检查。 安装 npm i vue-web-speech 用法 通过Vue.use将插件注入到vue实例 import Vue from 'vue' import VueWebSpeech ...
梅尔倒谱分析语音的自适应算法;The authors describe a mel-cepstral analysis method and its adaptive algorithm.
chrome-speechifier Speechifier 是一个简单、静音的 Chrome 扩展程序,它使每个文本框都成为... 它通过将“x-webkit-speech”属性添加到页面上的合格 HTML 元素来利用 Chrome 的内置但被严重低估的 Web Speech API。
Html5支持语音搜索,可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-speech即可,例子如下: <input type="text" x-webkit-speech /> 这样你的输入框右边里就多了个「小...
细心的朋友可能会观察到谷歌搜索右侧有个语音搜索功能,能够实现语音识别功能,可能功能还不够完善,不过也算是一种趋势...3.x-webkit-grammar:指的是语音输入语法,"builtin:search”值使得语音输入的内容尽量靠近搜索
此react组件支持speech synthesis , text-to-speech 。 安装 为了安装react-speech ,只需运行 $ npm install react-speech --save 简单用法 使用react-speech非常简单,只需React.render语音组件,设置text属性,...
将 Windows10/Windows8 中自带的语音库 Microsoft Desktop Huihui 安装到 Windows7/Vista的方法。 Win8语音库MS-Huihui转Win7/Vista,这个是语音库,安装后无界面,可用微软提供的免费的TTSApp 这个工具选安装的...
谷歌的网站是时逛时新啊,今天在他们首页发现了HTML5的新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-speech即可,例子如下: 复制代码代码如下: <...
placeholder 默认提示字符 autofocus 当页面加载时,会获得焦点的一个按钮 x-webkit-speech 语音搜索,webkit内核才支持 accept 规定可上传的文件类型(仅适用type=file) alt 规定图片输入控件代替文本 ...
Win8语音库MS-Huihui转Win7能将 Windows10/Windows8 中自带的语音库 Microsoft Desktop Huihui 安装到 Windows7/Vista的方法。 Win8语音库MS-Huihui转Win7/Vista,这个是语音库,安装后无界面,可用微软提供的免费的...
对,这说明语音搜索只支持webkit内核浏览器,那么这段代码具体要放在哪呢? 复制代码代码如下:<input type="text" class="text" name="value_2" id="value_2" x-webkit-speech> 放在文本输入框内就行了,其他...
azure-ai-services-speech-service(微软语音服务文档)
我们先看下他们的不同显示。下面是在火狐下的截图: ...其中参数的意义:x-webkit-speech:就是让你的输入框的右边出现一个小话筒,有了语音的功能。lang:则是 强制输入框里面的语音的语言种类,例如
详解Android SDK1.6中Text-To-Speech(TTS)语音朗读
语音语料库_part_5 TRAIN DR5 TIMIT contains a total of 6300 sentences, 10 sentences spoken by each of 630 speakers from 8 major dialect regions of the United States. Table 1 shows the number of ...
RW-Resnet一种新的基于原始波形的语音抗欺骗模型_RW-Resnet A Novel Speech Anti-Spoofing Model Using Raw Waveform.pdf