Bar Visualizer
A dynamic audio visualization component for voice agents and media.
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/bar-visualizer.jsonUsage
<script setup lang="ts">
import { BarVisualizer } from '@/components/ui/bar-visualizer'
</script>
<template>
<BarVisualizer
state="speaking"
:bar-count="20"
demo
class="h-32 w-full bg-zinc-900 rounded-lg p-4"
/>
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| state | AgentState | - | Current state ('speaking', 'listening', 'thinking', 'connecting', 'initializing'). |
| barCount | number | 15 | Number of bars to display. |
| demo | boolean | false | If true, simulates audio visualization without a stream. |
| mediaStream | MediaStream | null | The audio stream to visualize (if not in demo mode). |
| minHeight | number | 20 | Minimum height percentage of the bars. |
| maxHeight | number | 100 | Maximum height percentage of the bars. |