VoiceBeam

用法

基础

包裹恰好一个自带圆角的元素；传麦克风的 stream，或用 level 手动驱动。

麦克风输入

useMicrophone() 关闭回声消除、降噪与自动增益后请求 getUserMedia；start() 必须在点击事件里调用。

<script setup lang="ts">
import { useMicrophone } from '@talex-touch/tuffex/pro'

const mic = useMicrophone()
const live = computed(() => mic.state.value === 'live')
</script>

<template>
  <TxVoiceBeam :stream="mic.stream.value" :processing="transcribing">
    <TxCard :radius="16" :padding="24" shadow="none">想问点什么…</TxCard>
  </TxVoiceBeam>
  <TxButton :aria-pressed="live" @click="live ? mic.stop() : mic.start()">
    {{ live ? '停止' : '说话' }}
  </TxButton>
</template>

宿主预设与配色

type 选择宿主预设，显式传入的几何属性覆盖预设值；colorVariant 选择调色板。

<template>
  <TxVoiceBeam type="pill" color-variant="ocean" :scale="0.9">
    <div class="pill">录音中…</div>
  </TxVoiceBeam>

  <TxVoiceBeam type="mobile" color-variant="candy" :level="() => 0.8">
    <div class="screen">正在聆听</div>
  </TxVoiceBeam>
</template>

最佳实践

• 不要把辉光当作麦克风开着的唯一指示：保留文字状态与按钮的 aria-pressed，并用 role="status" 播报变化。
• level 传 getter（:level="() => meter.value"）而不是响应式数字：getter 每帧采样一次，不触发重渲染。
• 需保持清晰的文字与控件放到 position: relative; z-index: 5；被包裹元素内的浮层会被裁掉，用 portal 移出。
• 关闭语音界面时调用 mic.stop()，组合式函数只在卸载时停止音轨。
• 实例要少：每个实例都有模糊图层与画布，不适合密集列表。

API 参考

属性

插槽

事件

CSS 变量

概述

• 按子元素的 border-top-left-radius（取不到时为 16 px）裁剪，光束贴合元素边缘。
• 全页共用一个约 60 fps 封顶的 requestAnimationFrame 循环；实例滚出视口（256 px 边距）后注销并释放分析器。
• 每页共用一个 AudioContext，每个 stream 一个 source 节点（引用计数），每个实例一个分析器；音频只分析，不播放。
• 使用 stream 时读取 RMS 电平与三个频段（80-300、300-2000、2000-6000 Hz）。
• 减少动态效果时停止待机呼吸、色彩流动、色相漂移、扭曲与处理扫描；对声音的反应保留，因为它本质是电平表。

技术实现

• styles.ts、presets.ts、voice-driver.ts、audio.ts、color.ts 逐字移植自 Jakubantalik/Libraries · voice-glow（MIT © Jakub Antalik）；useMicrophone 是上游 React hook 的 Vue 移植。
• 源码：packages/tuffex/packages/components/src/voice-beam/。