VoiceBeam

Usage

Basic

Wrap exactly one element that carries its own radius; feed it a microphone stream, or drive it with level.

Microphone Input

useMicrophone() requests getUserMedia with echo cancellation, noise suppression, and auto gain off; call start() from a click.

<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">Ask anything…</TxCard>
  </TxVoiceBeam>
  <TxButton :aria-pressed="live" @click="live ? mic.stop() : mic.start()">
    {{ live ? 'Stop' : 'Listen' }}
  </TxButton>
</template>

Host Presets and Palettes

type picks the host preset, and any geometry prop you pass wins over it; colorVariant picks the palette.

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

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

Best Practices

• Never let the glow be the only sign the mic is live: keep a text status and the button's aria-pressed, and announce changes with role="status".
• Pass level a getter (:level="() => meter.value"), not a reactive number; the getter is sampled once per frame with no re-render.
• Put content that must stay crisp at position: relative; z-index: 5; overlays inside the wrapped element get clipped, so portal them out.
• Call mic.stop() when the voice UI closes; the composable stops tracks only on unmount.
• Keep instances few: each runs blurred layers and a canvas, so it doesn't suit dense lists.

API Reference

Props

Slots

Events

CSS Variables

Overview

• It clips to the child's border-top-left-radius (16 px when none is found), so the beam hugs the element edge.
• One shared requestAnimationFrame loop, capped at about 60 fps, drives every instance; an instance scrolled offscreen (256 px margin) unregisters and releases its analyser.
• One AudioContext is shared per page, with one source node per stream (reference-counted) and one analyser per instance. Audio is analysed, never played.
• With a stream, the analyser reads the RMS level plus three voice bands (80-300, 300-2000, 2000-6000 Hz).
• Under reduced motion, the idle breathing, colour flow, hue drift, distortion, and processing sweep stop; the reaction to sound stays, since it is a meter.

Technologies

• styles.ts, presets.ts, voice-driver.ts, audio.ts, and color.ts are verbatim ports of Jakubantalik/Libraries · voice-glow (MIT © Jakub Antalik); useMicrophone is the Vue port of its React hook.
• Source: packages/tuffex/packages/components/src/voice-beam/.