New version of voice input button using new interface of iflytek voice dictation (the stream version). 基于讯飞新版语音听写(流式版) api 的语音输入按钮 vue 组件。
New version of voice input button using new interface of iflytek voice dictation (the stream version).
基于讯飞新版语音听写(流式版) api 的语音输入按钮 vue 组件。使用 HTML 原生媒体接口,故兼容性依浏览器而定,具体可参考这里 Can I Use
按下按钮说话,松开按钮识别。同时支持配置为点击说话,再次点击结束说话。
旧版接口请查看 voice-input-button
使用中遇到问题,欢迎前往 Issues 提交问题单或反馈。
appId
、apiKey
、APISecret
,这是必须的。npm install voice-input-button2
# or install from github reponsitory
npm install https://github.com/ferrinweb/voice-input-button2.git
# or use yarn / 推荐使用 yarn
yarn add voice-input-button2
# or install from github reponsitory
yarn add https://github.com/ferrinweb/voice-input-button2.git
import voiceInputButton from 'voice-input-button2'
Vue.use(voiceInputButton, {
appId: '', // 您申请的语音听写服务应用的ID
apiKey: '', // 您开通的语音听写服务的 apiKey
apiSecret: '', // 您开通的语音听写服务的 apiSecret
color: '#fff', // 按钮图标的颜色
tipPosition: 'top' // 提示条位置
... // 其他配置项, 参见下方 [Attributes / 属性] 部分
})
在这种引入方式下,您必须通过在组件标签上设置 appId、apiKey、apiSecret 等属性来配置相关参数
import voiceInputButton from 'voice-input-button2'
export default {
components: {
voiceInputButton
},
...
}
Here is an example of introducing code on demand. You can checkout this repository, run and try this demo.
此处演示按需引入方案,你可以直接检出 voice-input-button2 源码到本地,运行并查看示例。
<template>
<div id="app">
<div class="result">{{result}}</div>
<div class="voice-input-button-wrapper">
<voice-input-button
appId="您的应用ID"
apiKey="您开通的语音听写服务 APIKey"
apiSecret="您开通的语音听写服务的 apiSecret"
v-model="result"
@record="showResult"
@record-start="recordStart"
@record-stop="recordStop"
@record-blank="recordNoResult"
@record-failed="recordFailed"
@record-ready="recordReady"
@record-complete="recordComplete"
interactiveMode="touch"
color="#fff"
tipPosition="top"
>
<template slot="no-speak">没听清您说的什么</template>
</voice-input-button>
</div>
</div>
</template>
<script>
import voiceInputButton from './lib/voice-input-button'
export default {
name: 'App',
components: {
voiceInputButton
},
data () {
return {
result: ''
}
},
methods: {
recordReady () {
console.info('按钮就绪!')
},
recordStart () {
console.info('录音开始')
},
showResult (text) {
console.info('收到识别结果:', text)
},
recordStop () {
console.info('录音结束')
},
recordNoResult () {
console.info('没有录到什么,请重试')
},
recordComplete (text) {
console.info('识别完成! 最终结果:', text)
},
recordFailed (error) {
console.info('识别失败,错误栈:', error)
}
}
}
</script>
<style>
html, body {
margin: 0;
width: 100%;
height: 100%;
}
*{
box-sizing: border-box;
}
#app {
position: absolute;
top: 100px;
left: 0;
right: 0;
margin: 0 auto;
width: 400px;
}
.voice-input-button-wrapper{
width: 42px;
height: 42px;
background-color: mediumpurple;
border-radius: 50%;
}
.result{
width: 100%;
padding: 25px;
border: #e2e2e2 1px solid;
border-radius: 5px;
line-height: 2;
font-size: 16px;
color: #727272;
min-height: 24px;
margin-bottom: 25px;
}
</style>
# 安装依赖
yarn install
# 启动项目
yarn run dev
名称 | 说明 | 默认值 |
---|---|---|
recording | 正在录音提示文字,按下按钮时,将显示该录音中提示文本 | 好,请讲... |
no-speak | 录音完成但未能识别到有效结果是的提示文本 | 您好像没说什么 |
wait | 按下录音按钮后,按钮准备好前的提示文本 | 请稍后... |
名称 | 类型 | 说明 | 默认值 |
---|---|---|---|
color | String | 麦克风按钮及录音中、识别中图标的颜色 | #333 |
tipPosition | String | 提示条出现的位置,支持 top/right/left/bottom 四个取值 | top |
tipTextColor | String | 提示条文本颜色 | #f2f2f2 |
tipBackgroundColor | String | 提示条背景色 | #4b667d |
tipShadowColor | String | 提示条阴影色 | rgba(0,0,0,.1) |
interactiveMode | String | 交互模式: press -> 按下开始录音,放开结束录音; touch -> 点击开始录音,再次点击结束录音 |
press |
returnMode | String | 识别结果返回模式: increment -> 增量模式,增量返回识别结果。每次返回都是一个阶段性的完整结果,包含对前面识别结果的追加、补充和修正; complete -> 完整模式,完成本次识别后返回最终结果 |
increment |
appId | String | 您申请的语音听写服务应用的 ID | 无 |
apiKey | String | 您开通的语音听写服务的 apiKey | 无 |
apiSecret | String | 您开通的语音听写服务的 apiSecret | 无 |
language | String | 语种,参见讯飞语音听写接口文档 | zh_cn |
accent | String | 方言,参见讯飞语音听写接口文档 | mandarin |
pd | String | 领域个性化参数,参见讯飞语音听写接口文档 | 无 |
rlang | String | 简体: zh_cn 繁体: zh-hk |
zh_cn |
ptt | Number | 是否开启标点符号添加(仅中文支持): 1 -> 开启; 0 -> 关闭 |
1 |
nunum | Number | 将返回结果的数字格式规则为阿拉伯数字格式: 1 -> 开启; 0 -> 关闭 |
1 |
vad_eos | Number | 用于设置端点检测的静默时间,即静默多长时间后引擎认为音频结束,单位是毫秒 | 3000 |
名称 | 说明 | 参数 |
---|---|---|
record-ready | 录音按钮已就绪 | 无 |
record-start | 按下按钮开始录音 | 无 |
record | 收到识别结果。 在 returnMode 的 complete 模式下,表示收到最终结果 |
当前识别结果 |
input | 收到识别结果,与 record 事件同步抛出,用于 v-model 绑定变量 |
当前识别结果 |
record-stop | 录音结束。 一般当松开按钮( press 模式)或关闭录音(touch 模式)时触发;也可能由组件根据静默时长配置( vad_eos )触发 |
无 |
record-blank | 录音识别完成,但无识别结果 | 无 |
record-complete | 语音识别完成事件。 相较于 record-stop ,该事件表示语音识别已完成并返回了最终结果 |
最终识别结果 |
record-failed | 录音识别失败 | 错误栈数据 |
注意:新版接口为流式版本,即识别过程中会有多次返回,其中包含对前面识别结果的追加、补充和修正。因此在同一识别过程中会多次触发
record
和input
事件,在您将收到的识别结果拼接到其他字符串时,您需要注意到这点。如果仅需要返回最后的结果,则可以监听record-complete
事件或将returnMode
属性设置为complete
。
MIT Lisence.