Skip to content

useAiVoice 语音交互

浏览器兼容性

调用浏览器原生的语音识别 API,在 谷歌浏览器 中使用,需要在 🪄 魔法环境 中才能正常使用。

useAiVoice 是一个高度集成的语音处理 Hook。它不仅封装了浏览器原生的语音转文字(STT)能力,还内置了 Web Audio 分析引擎,能够实时输出高频波形数据,完美配合 AiVoiceTrigger 组件实现动感视觉反馈。

核心特性

  • 视觉同步:内置频率分析器,实时返回 amplitudes 数组,直接驱动波形动画。
  • 物理录制:内置 MediaRecorder,录音结束后自动生成 .webm 音频 Blob。
  • 智能 VAD:支持静音检测(Voice Activity Detection),用户停止说话后自动结束录音。
  • 实时转写:支持 interimResults,在说话过程中即可获取部分识别结果。
  • 即插即用:自动管理麦克风权限、AudioContext 生命周期及销毁逻辑。

基础用法

⚠️ 当前环境不支持 Web Speech API(建议使用 Chrome 并开启魔法)
等待发言...
基础交互演示

结合 AiSender 使用

将语音触发器集成到 AiSender 中,实现类似于主流 AI 助手的输入体验。

集成输入框

进阶方案:拟物化 AI 对话

你好!我是语音助手,有什么可以帮你的?

全流程语音对话

API

UseAiVoiceOptions

属性名说明类型默认值
language识别语言string'zh-CN'
interimResults是否需要临时结果booleantrue
continuous是否开启连续识别booleanfalse
vad是否开启智能静音检测booleantrue
vadThreshold静音自动停止的时间阈值 (ms)number2000
volumeThreshold音量变化灵敏度 (0-1)number0.05
waveCount返回的波形柱数量number20
useSTT是否启用浏览器语音识别booleantrue
onStart开始录音时回调() => void-
onStop停止后返回转写文本和 Blob(transcript: string, blob: Blob | null) => void-
onResult最终转写更新回调(transcript: string) => void-
onPartialResult临时转写更新回调(transcript: string) => void-
onError错误回调(error: unknown) => void-

返回值

导出项说明类型
isRecording响应式录音状态Ref<boolean>
transcript已确认的转写文本Ref<string>
interimTranscript实时临时转写文本Ref<string>
amplitudes实时波形数据Ref<number[]>
volume实时音量 (0-100)Ref<number>
audioBlob录音生成的音频文件Ref<Blob | null>
start开始录音() => Promise<void>
stop停止录音() => void
cancel取消录音并放弃当前结果() => void
sttSupported当前环境是否支持 STTboolean

Released under the MIT License.