@kyfe/ks-voice-text
v1.0.4
Published
ks-voice-text
Maintainers
Keywords
Readme
KsVoiceText 语音转文字组件
长按录音,上移取消,松手转文字的语音交互组件。
使用方式
<template>
<ks-voice-text
ref="voiceText"
@start="handleStart"
@cancel="handleCancel"
@success="handleSuccess"
>
<!-- 自定义触发器 -->
<div class="voice-btn">
<i class="van-icon van-icon-volume-o"></i>
</div>
</ks-voice-text>
</template>
<script>
export default {
methods: {
handleStart() {
console.log('开始录音')
// 调用 SDK 开始录音
},
handleCancel() {
console.log('取消录音')
// 处理取消逻辑
},
handleSuccess() {
console.log('录音成功')
// 调用 SDK 转文字
}
}
}
</script>事件
| 事件名 | 说明 | 回调参数 | |--------|------|----------| | click | 点击触发 | - | | start | 长按触发录音时触发 | - | | cancel | 上移取消录音时触发 | - | | success | 松手转文字成功时触发 | - |
交互说明
- 长按触发器(300ms)→ 弹出底部录音面板
- 手指上移(超过100px)→ 切换取消状态
- 松手 → 根据位置判断取消或成功
- 取消:立即关闭面板
- 语音转化:显示"识别中..."状态
- 成功:返回给调用方结果,理解关闭面板
