如何让界面跟随声音律动Libraries.dev 语音光晕 voice-glow 完整实战教程【免费下载链接】Libraries.devHigh-crafted UI libraries for AI agents: Border beam, Orbs, Metal, Gooey, Voice, Image, Avatar bots项目地址: https://gitcode.com/gh_mirrors/bo/Libraries.devLibraries.dev 的voice-glow是一款面向 React 的语音光晕Sound-reactive glow组件在聊天输入框、搜索栏或卡片底部一道居中的彩色光束会跟随你的声音强度升起、绽放、回落——正是让界面跟着声音律动的关键。本文带你从零上手安装组件、接入麦克风、调校律动手感再到聆听 → 思考的状态切换与 8 套配色帮你快速做出有生命感的语音交互界面。为什么需要会呼吸的声音反馈 语音类产品AI 助手、语音助手、通话界面最需要的不是波形图而是一种直观的我听到了反馈用户说话 → 光晕升高、颜色流动用户停顿 → 光晕回落保留轻微呼吸感系统在思考 → 光斑聚成光束来回扫动voice-glow 把这些编舞全部内建你只需要包住内容、传入音频流。一键安装接入 voice-glow 的最快方式组件已在 npm 发布安装只需一行npm install voice-glow核心用法非常简洁——用useMicrophone拿到麦克风流用VoiceBeam包住你的内容import { VoiceBeam, useMicrophone } from voice-glow; function Composer() { const mic useMicrophone(); return ( VoiceBeam stream{mic.stream} div style{{ padding: 32, borderRadius: 20, background: #1d1d1d }} Listening… /div /VoiceBeam button onClick{mic.state live ? mic.stop : mic.start} {mic.state live ? Stop : Listen} /button / ); }两个容易踩的坑必须在用户点击里调用mic.start()——浏览器只允许在用户手势中开启麦克风Safari 尤其严格。需要安全上下文https或localhost否则拿不到getUserMedia。useMicrophone默认关闭浏览器回声消除、降噪和自动增益见 useMicrophone.ts这样光晕看到的是声音的真实动态律动更自然。三种宿主类型让光晕匹配你的界面光晕几何参数按约 350px 的聊天输入框调校type属性可一键切换宿主预设type适用场景效果差异default聊天输入框、搜索栏标准尺寸pill约 150×44 的录音小胶囊光晕内收、弧度更浅、光带更细mobile手机屏幕底部起伏范围更宽、升起更高配合scale可整体缩放效果VoiceBeam typepill scale{1.3}。官网的测试页就完整演示了三种宿主的全屏效果可参考 voice-phone.tsx。调校律动手感4 个响应参数 4 个形态参数 ️光晕对声音的回答方式由 4 个参数决定sensitivity默认 3.1输入增益声音小的麦克风调高threshold默认 0.015噪声门限低于此值视为静音attack默认 0.325s声音变响时升起的速度release默认 0.86s声音落下后回落的速度而光晕本身的性格由另外 4 个参数塑形reach满音量时能长多高spread能扩多宽flow默认 48色谱横向流动速度——正是它让颜色不停变换位置bands默认开启让低音区驱动中心光瓣、中音驱动邻瓣、高音驱动外侧光瓣声音一变颜色就从中心向外涟漪式扩散而不是一坨光在原地缩放小技巧想要安静时完全无光把idle设为 0默认 0.23 的静息值会让光晕保持轻柔呼吸感不会显得死。聆听 → 思考processing状态让 AI 界面自带高级感 ✨当语音被捕获、AI 正在转写或思考时把processing打开即可VoiceBeam stream{listening ? mic.stream : null} processing{thinking} /所有光瓣会聚成一道紧凑光束在光晕范围内左右往返扫动、两端缓动光晕保持点亮——这正是border-beam的流动光束被关进语音光晕里的效果。两种形态自动平滑过渡聆听 → 处理 → 静息的完整流程无需任何额外编舞。处理期间形变失真会自动淡出保证光束扫动顺滑见 voiceDriver.ts 中的驱动逻辑。没有麦克风用level手动驱动光晕不想用真实麦克风比如语音通话里想跟随对方的声音或者纯演示时直接喂一个 0–1 的数值即可VoiceBeam level{() meter.current} {/* 每帧采样的取值函数 */} Card / /VoiceBeam VoiceBeam level{speaking ? 0.8 : 0} {/* 或普通布尔驱动 */} Card / /VoiceBeamlevel为函数时每帧采样、不触发 React 重渲染为数值时偶尔变化也没问题。任意MediaStream都可用包括 WebRTC 远端对端的流——语音通话 UI 可以用对方的声音点亮光晕。8 套配色 明暗主题风格一步到位变体色调变体色调colorful全光谱默认candy粉紫糖果色mono灰阶ice青蓝冷色ocean蓝紫gold琥珀金黄sunset橙黄红forest绿青VoiceBeam colorVariantsunset themelight /theme支持dark/light/auto跟随系统非灰阶变体的色相会缓慢漂移staticColors可固定想完全自定义直接传 7 个光瓣色colors和光带配色bandColors留空的槽位自动沿用变体主题色官网 Studio 可视化工作台里可以实时调整这些参数并预览效果它是怎么做到高性能的30 秒速览理解原理有助于放心在生产环境使用三层结构1px 彩色边缘描边、元素内部柔光、模糊光晕bloom全部裁剪在元素内另有一条 Canvas 绘制的光带与可选的空间扭曲见 styles.ts 的样式生成引擎单共享 rAF 循环所有实例由一个requestAnimationFrame循环上限约 60fps统一驱动每实例每帧只读AnalyserNode的 RMS 与低/中/高频能量、做包络计算后写入 CSS 自定义属性——真正的绘制全交给浏览器音频只分析、不播放共享一个AudioContext输出端不连接任何节点见 audio.ts自动降载实例不可见或滚出视口时暂停手机端柔光层按半分辨率光栅化系统开启减少动态效果时呼吸、流动与色相漂移停止但声音响应保留——因为它本质是计量器而非装饰无障碍所有效果层pointer-events: none纯装饰不影响键盘导航与读屏完整 API 可查阅 VoiceBeam.tsx 与 voice-glow README含全部 60 个属性表和 CSS 钩子变量。常见问题清单 ⚠️点按钮没反应检查是否在用户手势中调用start()以及页面是否为 https/localhostSafari 上没有扭曲效果WebKit 下宿主超过约 60000px²如整块手机屏幕时形变失真会自动关闭以保帧率聊天输入框/胶囊仍保留光晕颜色不对检查theme是否与背景匹配浅色主题默认 0.8 的strength想要更强的存在感调sensitivity与brightness或用scale整体放大写在最后voice-glow 的精髓在于克制默认参数已经过调校你只需安装 → 包住内容 → 传入音频流三步就获得一个随声音呼吸、随语义流转的专业级语音光晕。从聊天输入框到整屏手机界面配合processing状态AI 语音产品的听我说 → 我在想叙事几乎零成本落地。项目采用 MIT 协议LICENSE放心用于你的产品。【免费下载链接】Libraries.devHigh-crafted UI libraries for AI agents: Border beam, Orbs, Metal, Gooey, Voice, Image, Avatar bots项目地址: https://gitcode.com/gh_mirrors/bo/Libraries.dev创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考