跳转到内容

语音光效 VoiceGlow

VoiceGlow 适合展示语音采集状态。它只负责显示光效;麦克风权限和录音生命周期由使用者管理。传入 stream 时会分析音频,传入 level 时可由现有音量数据驱动。

独立使用时可调用 useVoiceMicrophone() 获取 stream、state、start() 和 stop(),并从用户点击事件中调用 start()。组件卸载后会停止已获取的音轨。Sender 已有录音管理,无需调用这个组合函数。

用 level 提供 0 到 1 的音量值;也可以传入返回音量的函数,供动画逐帧读取。示例同时展示 theme="dark" 和 theme="light",使用时让光效主题与所在背景一致。

type="pill" 适合较窄的录音按钮区域。color-variant 控制配色。

录音结束后可设置 processing,使光效切换为往返移动的处理动画。

默认插槽承载光效所在的区域;光效覆盖层不会拦截鼠标操作。

参数名 描述 类型 默认值
stream 要分析的音频流,优先于 level MediaStream | null -
level 手动音量或逐帧取值函数 number | (() => number) 0
type 容器尺寸预设 'default' | 'pill' | 'mobile' 'default'
theme 光效主题 'dark' | 'light' | 'auto' 'auto'
color-variant 配色 'colorful' | 'mono' | 'ocean' | 'sunset' | 'forest' | 'candy' | 'ice' | 'gold' 'colorful'
processing 显示处理态光束 boolean false
active 是否启用光效 boolean true
paused 是否暂停动画与音频分析 boolean false
sensitivity / threshold 输入增益 / 噪声门限 number 3.1 / 0.015
attack / release 响应上升 / 回落时长,单位秒 number 0.325 / 0.86
scale / strength 整体尺寸 / 光效强度 number 由预设决定
colors / band-colors 自定义光瓣 / 光带颜色 string[] / VoiceBeamBandColors 由配色决定

其他几何参数可参考导出的 VoiceGlowProps 类型。

事件名 描述 参数
level 当前平滑后的音量 value: number
activate 淡入动画结束 -
deactivate 淡出动画结束 -
插槽名 描述
default 光效所包裹的内容

Sender 在启用 allow-speech 后使用此光效,但默认只在录音功率超过 4% 时激活,静音时不显示呼吸动画。voice-glow 接受布尔值或 VoiceGlowProps:设为 false 可隐藏,设为 true 使用说话检测默认行为,传入 { colorVariant: 'ocean', type: 'pill' } 等对象可细调。threshold 可调整检测门限,显式设置 active 可覆盖自动激活。Sender 默认传入 recorder-core 的音量数据和当前主题;对象中的 level、stream、theme 可以覆盖对应默认值,不会额外请求麦克风权限。